CODEWITHSUNDEEP
htmlcssdrop-down-menunavigationnav
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

How to properly line up a dropdown menu?

This is my first time doing a dropdown menu. I'm confused as to why my dropdown menu is acting strange. I simply wanted to hide the sub menus such that when it is hovered, it will show.

The problem is that when it is hovered, it breaks the nav in half. I don't get it. Here's a jsfiddle demonstrating it, and here's my HTML & CSS nav code:

HTML:

<ul id="nav">
    <li><a style="background-color:#000000;color:#FFFE41;text-decoration:none;font-weight:bold;" href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="history.html">Camera Phone</a></li>
    <li><a href="focus.html">Manual & Auto Focus</a></li>
    <li><a href="exposure.html">Exposure</a>
        <ul>
            <li><a href="iso.html">ISO</a></li>
            <li><a href="aperture.html">Aperture</a></li>
            <li><a href="shutterspeed.html">Shutter Speed</a></li>
        </ul>
    </li>
    <li><a href="whitebalance.html">White Balance</a></li>
    <li><a href="lowlight.html">Low Light</a></li>
    <li><a href="epilogue.html">Epilogue</a></li>
</ul>

CSS:

ul#nav {
    margin-top: -9px;
    /*put nav in the upper-top browser*/
    list-style-type: none;
    /*gets rid of bullets*/
    padding: 0;
    text-align:center;
}
#nav li {
    margin: 0;
    display: inline;
    /*display list horizontally*/
    margin-left: -4px;
    /*dense the links together*/
}
#nav a {
    display: inline-block;
    /*don't break onto new lines and follow padding accordingly*/
    padding:10px;
    /*give space between links*/
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
}
#nav li > ul {
    display:none;
    /*hide the sub-nav menus*/
}
#nav li:hover > ul {
    /*display sub menus when hovered over*/
    display:block;
    position:relative;
    width:10%;
    left:61%;
    /*pushes the nav right under where the menu is*/
}

Upvotes: 2

Views: 5457

Answers (1)

random_user_name
random_user_name

Reputation: 26160

Your html looks pretty good (except the inline styles - avoid them where possible!)

The solution to getting a dropdown nav to work is surprisingly simple, once you've done it enough times.

First, your parent li's need to be position: relative:

#nav li{
    margin: 0;
    display: inline; /*display list horizontally*/
    margin-left: -4px; /*dense the links together*/
    position: relative;
}

Then, your child nav needs to be position: absolute, and your top / left need to be positioned within the parent li. By the way, I recommend styling everything except the "Reveal" on the base element, then just styling the "reveal" on the hover:

#nav li > ul {
    display:block;
    position:absolute;
    width: 200px; /* Adjust as needed.  10% is now 10% of the parent li, so not enough */
    height: auto;
    left: -999em; /* this hides the menu when not hovered */
    top: 40px; /* adjust to match the height of the parent li */
}

#nav li:hover > ul{
   left: 0; /* show the menu when hovered */
}

Finally, when it comes to navigation, I'm a fan of using display:inline-block rather than inline for the nav elements, so that you can properly apply padding, etc. If you do so, remember to use the IE7 hack (if you intend to support IE7).

Upvotes: 4

Related Questions