Why is the dropdown menu aligned to the left?
- by fmz
I am working on a dropdown navigation for a site and am having some trouble with the dropdown portion aligning with the parent category - it shifts all the way to the left.
Here is the html:
<ul class="dropdown">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About Us</a>
<ul class="sub-menu">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Subcontractors</a></li>
</ul>
</li>
<li><a href="#" id="personal">Personal Banking</a></li>
<li><a href="#" id="commercial">Commercial Banking</a></li>
<li><a href="#" id="service">Customer Service</a>
<ul class="sub-menu">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Subcontractors</a></li>
</ul>
</li>
<li><a href="#" id="investors">Investor Relations</a></li>
<li><a href="#" id="contact">Contact Us</a></li>
</ul>
Here is the CSS:
ul.dropdown { position: relative; background: #4e8997; height: 40px; padding-left: 5px; }
ul.dropdown li { float: left; zoom: 1; }
ul.dropdown li a {
display: block;
margin-top: 5px;
padding: .5em .6em;
color: #fff;
font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
border: none;
}
ul.dropdown a:hover { background-color: #c29c5d; color: #fff; }
ul.dropdown a:active { background-color: #c29c5d; color: #fff; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 200px; visibility: hidden; position: absolute; top:100%; left: 0; }
ul.dropdown ul li { font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-bottom: 1px solid #ccc; float: none; color: #fff; background-color: #c29c5d; height: 20px; }
ul.dropdown ul li a { display: inline-block; }
ul.dropdown ul li a:hover { background-color: #a2834d; color: #fff; height: 20px; }
I tried changing the ul.dropdown ul to position relative, but that breaks the navigation. I would appreciate some help getting this corrected.
Thanks.
