DROP DOWN MENU NOT CLEARING PROPERLY

Takeshi Okada

Total Post:89

Points:629
Posted by  Takeshi Okada
HTML5 
 1413  View(s)
Ratings:
Rate this:
Hi Everyone!

I'm trying to build a very simple drop down menu. I want all of the li's to be 60px tall. I've used a few different tutorials for drop down menus but I keep running into the same problem. I can't get 'Link 1' to completely clear 'Drop 1'. It will clear the anchor but not the li itself.

http://jsfiddle.net/ZFWBU/12/

    <nav>

    <ul id="nav">

        <li><a href="#">Drop 1</a>

            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>

        </li>

        <li><a href="#">Drop 2</a>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </li>

    </ul>

</nav>
CSS:

a {
    color: #333;
}

nav {
    width: 992px;
    height: 50px;
    margin: 0 auto;

    border: 1px solid #ebebeb;
    background: red;
}

#nav {
    width: 992px;
    margin: 0 auto;
    line-height: 100%;

}

#nav li {
    float: left;
    position: relative;
    list-style: none;
}


/* main level link */
#nav a {
    width: 280px;
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  16px 20px;
    margin: 0;

    border: 1px solid white;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: blue;
}

/* level 2 list */
#nav ul {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 35px;
    left: 0;

    background: #f5f5f5;
}

/* dropdown */
#nav li:hover > ul {
    display: block;
}

#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#nav ul a {
    font-weight: normal;
}

/* clearfix */
#nav:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#nav {
    display: inline-block;
}

html[xmlns] #nav {
    display: block;
}

* html #nav {
    height: 1%;
}

Thanks in advance!
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Drop down menu not clearing properly

    Hi Takeshi!

    You are already setting the top property in this declaration, I adjusted it to 50px which you can see on JSFiddle.

    /* level 2 list */
    #nav ul {
        display: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50px;
        left: 0;
        background: #f5f5f5;
    }

    As mentioned by pzin in the comments, you can reduce future problems by using top: 100%, which won't then need to be edited in the future when you change the sizes.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!