SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submenu not in block, when hovered it goes across menu

    When I am trying to create a sub-menu, when I hover over the menu it is putting it in a line and not a block.

    I know I am missing something stupid but I cannot figure it out.

    HTML
    Code:
    <div id="navigation"> <!-- Navigation Starts Here -->
    			
    				<ul>
    				
    					<li><a href="index.html" title="Home" class="homenav">Home</a></li>
    					
                         <li><a href="about-us.html" title="About Us" class="aboutnav">About Us</a>
                           <ul>
                             <li><a href="certifications.html">Accreditations/Certifications</a></li>
                             <li><a href="testimonials.html">Testmonials</a></li>
                           </ul>
                         </li>
    
    					<li><a href="walk-in-tubs.html" title="Walk In Tubs" class="servicesnav">Walk In Tubs</a>
                           <ul>
                             <li><a href="features.html">Product Features</a></li>
                             <li><a href="therapeutic.html">Therapeutic Features</a></li>
    				         <li><a href="photos.html">Photo Gallery</a></li>
                          </ul>
                       </li>
                       
    					<li><a href="installation.html" title="Insallation" class="customernav">Installation</a></li>
    					<li><a href="warranty.html" title="Warranty" class="faqnav">Warranty</a></li>
                        <li><a href="/blog/" title="Blog" class="blognav">News</a></li>
    
    					<li style="margin-right:0px;"><a href="contact.html" title="Contact Us" class="contactnav">Contact Us</a></li>
    				
    				</ul>
    			
    			</div> <!-- Navigation Ends Here -->

    CSS
    Code:
    /* Navigation */
    
    #navigation {
    	width:680px;
    	float:right;
    	margin-top:15px;
    	position:relative;
    }
    
    #navigation li {
    	font-family:Tahoma, Arial, Verdana, Helvetica, sans-serif;
    	font-size:14px;
    	color:#FFFFFF;
    	float:left;
    	margin-right:25px;
    	position:relative;
    }
    
    #navigation li ul {
    	position: absolute;
    	left: 149px;
    	top: 0;
    	display: none;
    
    }
    
    #navigation li:hover ul { 
    display: block;
    }
    
    #navigation a {
    	color:#FFFFFF;
    }
    
    #navigation a:visited {
    	color:#FFFFFF;
    }
    
    #navigation a:hover {
    	color:#76D6F1;
    }
    
    #navigation ul { 
         padding:0; 
    	 margin:0; 
    	 
    	 }  
     
    #navigation ul:after { 
    	 display:block; 
    	 height:0; 
    	 clear:both; 
    	 visibility:hidden; 
    	 } 
    
    #navigation ul ul { 
         display:none; 
    	 width:100%; 
    	 position:absolute; 
    	 left:0; 
    	 }
    	   
    #navigation ul ul li { 
         float:none; 
    	
    	 }
    	   
    #navigation ul ul a { 
         padding:5px 10px; 
    	 border-left:none; 
    	 border-right:none; 
    	 font-size:14px; 
    	 }  
    
    /* Navigation */

    This is what it looks like when I hover over it.

    screen-dw.png

    Any Idears?
    Thanks In Advance

    David

  2. #2
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    what browser are you having problems in?

    seems to be an issue with the width 100% you have set on #navigation ul ul i have set this temporarily at 500px and all views ok http://jsfiddle.net/y6854/

    just need to work on this and your positioning i think

  3. #3
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate it. I finally got it working.
    Thanks In Advance

    David


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •