css drop down help

[vague]

Hi guys.

First off I have to say that when it comes to css dropdown I am definitely not the sharpest tool in the shed, so I hope someone can push me in the right direction.

Basically I’m just battling with the drop down bit. I’ve got the main nav the way I want it. All I really want for the drop down is a simple box with a darkish gray bg color and white text and light gray hover color with black text, with items sitting below each other. All the items must be the same length.

If anyone can I would really appreciate it.

Here is my code.

Code:

/*********************************************
Horizontal Navigaion Styles
*********************************************/
#menu {
color: #739b12;
background: url(images/menu-bg.png) top left no-repeat;
font-size: 16px;
font-family: “Century Gothic”, Helvetica, Arial, Sans-Serif;
text-align: left;
text-transform: uppercase;
padding: 21px 0px 0px 0px;
margin: 0px;
display: block;
width: 100%; min-height: 21px;
}
#menu ul {
background: url(images/menu-ul-bg.jpg) repeat-x;
margin: 0px;
padding: 2px 0px 0px 0px;
height: 97px;
display: block;
}
#menu ul li {
display: block;
float: left;
list-style-type: none;
margin: 0px;
padding: 29px 0px;
}
#menu ul li a {
color: #739b12;
padding: 31px 25px 32px;
margin: 0px;
text-decoration: none;
border-right: 1px solid #B5B5B5;
border-left: 1px solid #E0E0DF;
}
/* if you want to set a “current page item” style, do it here */
#menu ul li.current_page_item a, #menu ul li.current_page_item a:visited {
color: #739b12;
text-decoration: none;
background: #ccc url(images/menu-hover-active.jpg) repeat-x;
font-weight: bold;
}
#menu ul li a:hover {
color: #000;
text-decoration: none;
background: #739b12 url(images/menu-hover-active.jpg) repeat-x;
}

/* Style drop down list */

#menu li ul {
position: absolute;
width: auto;
left: -999em;
}

#menu li:hover ul, #nav li.sfhover ul {
left:-999em;
}

#menu li ul li a {
background: url(images/bg-nav.png);
display: inline;
line-height: auto;
font-size: 11px;
color: #666666;
width: 150px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

#menu li ul li a:hover {
background: #666666;
color:#FFF;
}

#menu li ul li a {
}

#menu li ul ul {
margin: -35px 0 0 180px;
}

#menu li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#menu li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}

/* IE7 Fix */

#menu li:hover, #nav li.hover {
position: static;
}

[dyrer]

check these links

http://www.alistapart.com/articles/dropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.csscreator.com/menu/multimenu.php
http://www.positioniseverything.net/css-dropdowns.html
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/

[Author]

Posts