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.