---
title: "Drop down menu not clearing properly"  
description: "Drop down menu not clearing properly"  
author: "Takeshi Okada"  
published: 2013-04-10  
updated: 2013-04-15  
canonical: https://www.mindstick.com/forum/757/drop-down-menu-not-clearing-properly  
category: "html5"  
tags: ["html5"]  
reading_time: 3 minutes  

---

# Drop down menu not clearing properly

Hi Everyone!\
I'm [trying](https://answers.mindstick.com/qa/93698/6-mistakes-couples-are-trying-to-save-money) to build a very [simple](https://yourviews.mindstick.com/story/1469/5-simple-ways-to-stay-fit-amp-healthy) [drop down](https://www.mindstick.com/forum/263/drop-down-list-problem) 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](https://www.mindstick.com/articles/23633/link-builder) 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](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)!

## Replies

### Reply by AVADHESH PATEL

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.\


---

Original Source: https://www.mindstick.com/forum/757/drop-down-menu-not-clearing-properly

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.