下拉菜單沒有正確清除

我正在嘗試構建一個非常簡單的下拉菜單。我希望所有的li都是60px高。我在下拉菜單中使用了幾個不同的教程，但我仍然遇到同樣的問題。我無法使'連接1'完全清除'連接1'。它會清除錨，但不是李本身。下拉菜單沒有正確清除

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

來源

2013-04-10 Alan

您已經設置top屬性在此聲明，我把它調整到50px你可以在see on JSFiddle。

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

正如在評論中提到pzin，您可以通過使用top: 100%，這將無須當您更改尺寸，以在將來修改減少未來的問題。

來源

2013-04-10 07:11:29 Fenton

我錯過了...謝謝 – Alan 2013-04-10 07:19:57

無論你標記爲接受的答案是什麼，我都建議使用'top：100％'，因爲它更容易處理，你的子菜單總是從'li'的底部開始，元件。 – pzin 2013-04-10 07:23:24

+1 to @pzin使用100％ - 當您在將來更改尺寸時，它可讓您減少一個編輯值。 – Fenton 2013-04-10 07:33:33

更新以下樣式並添加margin-top:15px;

#nav li:hover > ul { 
    display: block; 
    margin-top: 15px; 
}

來源

2013-04-10 07:10:00

更好的解決方案中設置的頂部位置到li元的全高度，所以你不要以後需要修改它，如果你改變它，因爲有一天它會自動適應自身：

#nav ul { 
    top: 100%; 
    [...] 
}

來源

2013-04-10 07:13:19 pzin

非常感謝...這是很好的建議 – Alan 2013-04-10 21:40:55

下拉菜單沒有正確清除

回答

相關問題