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;
}

There's s problem with your current HTML: There are no sub items. There's nothing to "drop down" and if there were, you haven't attempted to write any styles for it. — No Results Found
– No Results Found, Commented Mar 10, 2012 at 23:29
I tried several times and it caused more issues than it helped. I removed it so it would be a fresh start. I can edit it, but I figured this would be simpler. Thanks for pointing out the obvious. — Matt
– Matt, Commented Mar 10, 2012 at 23:33
There I added one. I could be going about this all wrong, but I have no idea how to implement it. Most of the examples I have seen on the web that are decent are trying to monetize off of their stuff. — Matt
– Matt, Commented Mar 10, 2012 at 23:40
Look up superfish. Excellent plugin that does this for you. I'm on mobile or I'd fix your code — Tallboy
– Tallboy, Commented Mar 10, 2012 at 23:42
A lot of examples on the web are still trying to support IE6 as well. You can steal my code from this post if you want, but it looks like Andres has you covered: stackoverflow.com/questions/9134490/… — No Results Found
– No Results Found, Commented Mar 10, 2012 at 23:52

Andres I Perez · Accepted Answer · 2012-03-11 11:35:16Z

2

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,

edited Mar 11, 2012 at 11:35

answered Mar 10, 2012 at 23:46

Andres I Perez

75.4k21 gold badges159 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Matt Over a year ago

That worked great. One issue remains. The subitems will appear behind the content below them. I want them to always be on top. Is this a z-index thing? Figured that part out... Thanks again

Andres I Perez Over a year ago

@Matt yes, that is a z-index issue, you can fix that by adding z-index:9999 to your submenu items, .Nav li ul, and a property of position:relative with a lower z-index ( e.g z-index:1; ) to your content container.

rfinz Over a year ago

The dropdown doesn't seem to persist when you mouse over newly-appeared items... if you make the <li> the hoverable item rather than the <a> in the top menu you can keep everything persisent with pure CSS.

Andres I Perez Over a year ago

@rfinz focused on the dropdown portion of the question but that is due to the margin/padding of the a element. Cleaned it up and now it works just fine: jsfiddle.net/gKHDR/5

Andres I Perez Over a year ago

@Matt cleaned up the code for your menu so use my latest demo instead (added a few things also, like clearfix).

|

jacktheripper · Accepted Answer · 2012-03-10 23:55:58Z

0

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;
}

edited Mar 10, 2012 at 23:55

answered Mar 10, 2012 at 23:43

jacktheripper

14.3k12 gold badges62 silver badges93 bronze badges

3 Comments

No Results Found Over a year ago

Did you happen to test this in anything but Chrome? It looks pretty bad in FF10.

jacktheripper Over a year ago

No, but it could easily be adapted for cross-browser

No Results Found Over a year ago

I'm assuming this is code you're actually using somewhere and not something you wrote just for this answer, so you should definitely check it out in Firefox: jsfiddle.net/FBJAf

Collectives™ on Stack Overflow

Simple CSS Dropdown

2 Answers 2

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related