Drop down menus and pathetic art of styling
- by fmz
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="#" id="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!
