Drop down menus and pathetic art of styling

Sorry folks, I must be brain-dead or something but I can't get the styling on these drop-down menus to cooperate.

I have the color and the font right, but I have unwanted spaces between the list elements and the a and the a:hover sizes should be the same.

I would appreciate some help getting this to work correctly.

Here is the page

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="#"  开发者_如何学Pythonid="investors">Investor Relations</a></li>
<li><a href="#"  id="contact">Contact Us</a></li>

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
ul.dropdown li a:visited  { 
display: block;
margin-top: 5px; 
padding: .5em .6em;
line-height: 16px; 
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 { 
    padding-left: 0;
    width: 200px; 
    display: none; 
    top:36px;
    margin-left: 0; 
    position: absolute;
}

ul.dropdown ul li { 
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-bottom: 1px solid #ccc;
display: block;
margin: 0;
padding: 0; 
float: none; 
color: #fff; 
background-color: #c29c5d; 
}

ul.dropdown ul li a:link            { display: block; font-size: 10px; width: 188px; height: 16px;  }
ul.dropdown ul li a:hover           { background-color: #a2834d; color: #fff;  } 

Thanks!

looks like you have forgotten a , comma between the two a rules you want

ul.dropdown li a
ul.dropdown li a:visited

should be

ul.dropdown li a,
ul.dropdown li a:visited

There are a few things wrong here:

ul.dropdown ul { 

should be:

ul.dropdown li ul {

.

ul.dropdown li a <-- missing comma here
ul.dropdown li a:visited

the issue is on your a tag. try playing with margins and paddings, i was fixing it, but you keep editing the page :$