Submenu not in block, when hovered it goes across menu

HTML & CSS
1

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

<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

/* 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.

Any Idears?

2

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

I appreciate it. I finally got it working.