導航下拉菜單問題

我的導航存在一些問題，當您將鼠標懸停在「匹配」鏈接上時，我嘗試創建一個下拉菜單。每當我將鼠標懸停在鏈接上時，列表將保留在所述鏈接的下面並破壞導航欄的外觀。任何幫助將非常感激導航下拉菜單問題

HTML

<nav> 
    <span class= "navbar-button"></span> 
    <ul class="navbar"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="#">Gallery</a></li> 
     <li><a href="#">Match</a> 
      <ul> 
       <li><a href="#">City</a></li> 
       <li><a href="#">Coastal</a></li> 
       <li><a href="#">Rural</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

CSS

body{ 
padding: 0; 
margin: 0; 
font-family: 'main'; 
} 

.navbar { 
list-style: none; 
background-color: #333; 
color: #fff; 
margin: 0; 
text-align: center; 
} 

.navbar > li { 
display: inline-block; 
padding: 1.3% 2%; 

} 

.navbar > li:hover { 
background-color: #585858; 

} 

.navbar > li > a{ 
text-decoration: none; 
font-size: 30px; 
color: #fff; 

} 

.navbar li ul { 
display: none; 
} 

.navbar li:hover ul{ 
display: block; 

}

來源

2014-10-12 Sam Ager

你需要使用absolute定位打破它從容器中，這樣就不會破壞其餘元素：

.navbar li ul { 
    position: absolute; 
    display: none; 
    background-color: #333; 
    margin: 0; 
    text-align: center; 
    padding: 20px; 
}

一定要其父設置爲position: relative或body將成爲其容器：

.navbar > li { 
    position: relative; 
    display: inline-block; 
    padding: 1.3% 2%; 
}

JSFIDDLE

來源

2014-10-12 14:22:45 jmore009

你是我的救命恩人 – 2014-10-12 14:35:34

添加到絕對位置：.navbar李UL

來源

2014-10-12 14:23:13

導航下拉菜單問題

回答

相關問題