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?