Simple CSS Dropdown

Question

I have made a few attempts at this and they ended up just getting confusing. The current HTML and CSS seems to be working fine for a simple horizontal CSS menu. I am struggling with dropping subitems off the current <li> elements.

I am trying to making them show up exactly below the current menu items with the same hovering effects as I have in place now. Any assistance would be appreciated. I am admittedly no CSS pro.

Current HTML:

<div class="MenuTop">
    <ul class="Nav">
    <li><a href="Home.aspx" title="Home">Home</a></li>
        <li><a href="Vehicles.aspx" title="Vehicles">Vehicles</a>
            <ul>
                 <li><a href="SubItem.aspx" title="SubOne">SubItemOne</a></li>
            </ul>
        </li>
        <li><a href="About.aspx" title="About">About</a></li>
        <li><a href="Contact.aspx" title="Contact">Contact</a></li>
        <li><a href="News.aspx" title="News">News</a></li>
    </ul>   
</div>

Current CSS:

.MenuTop
{
    width: 960px;
    background-color: Black;
    color: #fff;
    margin: auto auto 0px auto;
    padding: 5px;
    height:auto;
    font-family: Segoe UI, Arial;
    font-weight:bold;
    min-height:15px;
}
.MenuTop ul
{
    float: left;
    list-style: none;
    margin: -5px ;
    padding: 0px;
}
.MenuTop li 
{
    float: left;
    font-size:12px;
    font-family: Segoe UI, Arial;
    margin: 0;
    padding: 0;
}
.MenuTop a 
{
    background-color: Black;
    color: #fff;
    display: block;
    float: left;
    margin: 0;
    padding: 4px 12px 4px 12px;
    text-decoration: none;
}
.MenuTop a:hover 
{
    background-color: #404040;
    color: #fff;
    padding: 4px 12px 4px 12px;
}

Answer 1

You were close, but you're forgetting about positioning your submenu items absolutely to your parent li menu item and hiding it as well, by using display:none and then showing it on hover, so try something like this to achieve that effect:

CSS

.Nav li {
    position:relative;
}

.Nav li ul {
    display:none;
    position:absolute;
    top:30px;
}

.Nav li:hover ul {
    display:block;
}

Also, your submenu ul is not properly closed so go ahead and close it.

Ninja Edit: demo, by the way you can greatly benefit from properly targeting your menu by using the class you have given it, .Nav, instead of its parent class of its container, .MenuTop, that way you can target your menu and your menu alone and not any other element you might place inside that container,

Answer 2

I have created a working example for you on jsFiddle.

The HTML is as follows:

<nav>
    <ul class="cf">
        <li><a href="#">Home</a></li>
        <li><a  href="#">Vehicles</a>
            <ul>
                <li><a href="#">Sub-menu Item 1</a></li>
                <li><a href="#">Sub-menu Item 2</a></li>
                <li><a href="#">Sub-menu Item 3</a></li>
            </ul>
            </li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
    </ul>
</nav>​

and the CSS:

nav ul {
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;

}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
}
nav a {
     font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

    display: block;
    font: bold 14px sans-serif;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
}


nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 1em;
    visibility: hidden;
    z-index: 1;
}

nav li:hover ul {
    opacity: 1;
    top: 1em;
    visibility: visible;

}
nav li ul li {
    float: none;
    width: 100%;
}
.cf:after, .cf:before {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}​