CSS下拉展開整個導航欄，它

Question

下拉顯示問題

我試圖做一個純粹的CSS下拉菜單，我已經看過這個其他問題，但沒有解決方案似乎工作。我遇到的問題是，當我將鼠標懸停在下拉按鈕上時，它會顯示菜單，但它將整個導航欄放在上面。

body { 
 
    background-color: #15083E; 
 
    margin: 0; 
 
} 
 

 
.top-buttons { 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 99; 
 
} 
 

 
.top-buttons #logo { 
 
    font-family: arial; 
 
    text-align: center; 
 
    padding: 14px; 
 
    background-color: white; 
 
} 
 

 
.top-buttons>ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #15083E; 
 
    border-style: solid; 
 
    border-bottom: 1px solid white; 
 
    position: relative; 
 
} 
 

 
.top-buttons>ul>li { 
 
    float: left; 
 
} 
 

 
.top-buttons>ul>li>ul { 
 
    display: none; 
 
    background: #666; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 100%; 
 
} 
 

 
.top-buttons>ul>li a { 
 
    display: block; 
 
    color: white; 
 
    font-family: arial, sans-serif; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    min-width: 7em; 
 
} 
 

 
.top-buttons li a:hover { 
 
    background-color: #CC3E54; 
 
} 
 

 
.active { 
 
    background-color: #CC3E54; 
 
} 
 

 
.top-buttons ul li:hover>ul { 
 
    display: block; 
 
    position: relative; 
 
    float: none; 
 
    max-width: 7rem; 
 
} 
 

 
.top-buttons ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    vertical-align: top; 
 
} 
 

 
.top-buttons>ul ul>li { 
 
    background-color: #15083E; 
 
    list-style-type: none; 
 
} 
 

 
.top-buttons>ul ul>li a { 
 
    background-color: #15083E; 
 
}

<nav class="top-buttons"> 
 
    <ul> 
 
    <li id="logo">Logo</li> 
 
    <li><a class="active" href="index.htm">Home</a></li> 
 
    <li><a href="#">Placeholder</a></li> 
 
    <li><a>DropDown</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="#">Services</a></li> 
 
    </ul> 
 
</nav>

我的HTML可能不是最好的，我是比較新的了。

任何建議將不勝感激！

Answer 1

您的HTML還不錯。你非常接近工作解決方案。你失蹤的主要原因是你的下拉列表需要在它的相對定位的父元素中使用絕對定位。父母需要相對定位的原因是，絕對定位的子元素（下拉菜單）可以包含在其中，否則它會結束在你不想要的地方。

另一件對修復有點重要的東西是頂級ul上的overflow: hidden;。一旦下拉的絕對位置到位，隱藏的溢出將隱藏在ul之外的任何內容。你不想那樣。如果你刪除它，那麼你的底部邊界不會結束你想要的地方，所以你需要另一種方法來清除浮動的li。我使用clearfix來做到這一點，因此在ul上增加了.cf類。

body { 
 
    background-color: #15083E; 
 
    margin: 0; 
 
} 
 

 
.top-buttons { 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 99; 
 
} 
 

 
.top-buttons #logo { 
 
    font-family: arial; 
 
    text-align: center; 
 
    padding: 14px; 
 
    background-color: white; 
 
} 
 

 
.top-buttons>ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /* overflow: hidden; */ 
 
    background-color: #15083E; 
 
    border-style: solid; 
 
    border-bottom: 1px solid white; 
 
    /* position: relative; */ 
 
} 
 

 
.top-buttons>ul>li { 
 
    position: relative; 
 
    /* added */ 
 
    float: left; 
 
} 
 

 
.top-buttons>ul>li>ul { 
 
    display: none; 
 
    background: #666; 
 
    padding: 0; 
 
    /* position: relative; */ 
 
    position: absolute; 
 
    /* top: 100%; */ 
 
} 
 

 
.top-buttons>ul>li a { 
 
    display: block; 
 
    color: white; 
 
    font-family: arial, sans-serif; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    min-width: 7em; 
 
} 
 

 
.top-buttons li a:hover { 
 
    background-color: #CC3E54; 
 
} 
 

 
.active { 
 
    background-color: #CC3E54; 
 
} 
 

 
.top-buttons ul li:hover>ul { 
 
    display: block; 
 
    /* position: relative; */ 
 
    /* float: none; */ 
 
    max-width: 7rem; 
 
} 
 

 

 
/* 
 
.top-buttons ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    vertical-align: top; 
 
} 
 
*/ 
 

 
.top-buttons>ul ul>li { 
 
    background-color: #15083E; 
 
    list-style-type: none; 
 
} 
 

 
.top-buttons>ul ul>li a { 
 
    background-color: #15083E; 
 
} 
 

 
.cf:before, 
 
.cf:after { 
 
    content: " "; 
 
    /* 1 */ 
 
    display: table; 
 
    /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
}

<nav class="top-buttons"> 
 

 
    <ul class="cf"> 
 
    <li id="logo">Logo</li> 
 
    <li><a class="active" href="index.htm">Home</a></li> 
 
    <li><a href="#">Placeholder</a></li> 
 
    <li><a>DropDown</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="#">Services</a></li> 
 
    </ul> 
 
    
 
</nav>

我看到改進的幾個方面的CSS，但總體還不錯。