下拉導航列表

我一直在玩弄試圖讓下拉導航列表顯示我想要的。我設法讓它顯示在懸停上，這是我想要的，但我想要做的是嵌套懸停下拉列表顯示在其父鏈接下方的中心，並在兩側填充了一點點。希望這是有道理的，我已經把jsfiddle向你展示了它現在的樣子。下拉導航列表

.main-nav { 
 
    background: #718373; 
 
    text-transform: capitalize; 
 
    margin-top: 2%; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
nav li { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-right: 5%; 
 
    padding: 2%; 
 
} 
 

 
nav li a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
nav li ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    background: #718373; 
 
} 
 

 
nav ul ul li { 
 
} 
 

 
nav li:hover ul { 
 
    display: block; 
 
} 
 

 
.row { 
 
    max-width: 950px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.row { 
 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
 
} 
 

 
.row:before, 
 
.row:after { 
 
    content:""; 
 
    display:table; 
 
} 
 

 
.row:after { 
 
    clear:both; 
 
}

<div class="main-nav"> 
 
    <div class="row"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">About</a> 
 
      <ul> 
 
      <li><a href="#">one</a></li> 
 
      <li><a href="#">one</a></li> 
 
      <li><a href="#">one</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Diary</a></li> 
 
     <li><a href="#">Lessons</a></li> 
 
     <li><a href="#">Events</a></li> 
 
     <li><a href="#">Gallary</a></li> 
 
     <li><a href="#">Content</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

非常感謝

來源

2016-09-13 rufus

ul元素上有默認padding-left（或margin-left）屬性集。您必須先清除該屬性，然後根據需要在li元素上設置填充。

如果你希望你在absolute位置relative父li子，要小心left和right值居中。

的CSS修改：

nav li ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    background: #718373; 
    padding: 0; 
    margin: 0; 
    left: 0; right: 0; 
} 

nav ul ul li { 
    padding: 8px 10px; 
}

Updated fiddle

來源

2016-09-13 11:41:06

對於許多感謝，正是我一直在尋找真的很感激。最後還有一件事，我在懸停的下拉菜單中添加了一個邊框，但它似乎想顯示在菜單之外。我已經更新了小提示，告訴你我的意思是，如果那是好的https://jsfiddle.net/10hvaebb/4/ – rufus

不客氣，應該是這樣的：https://jsfiddle.net/10hvaebb/5/ –

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: red; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 
</style> 
</head> 
<body> 

<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropbtn">Dropdown</a> 
    <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
    </div> 
    </li> 
</ul> 

<h3>Dropdown Menu inside a Navigation Bar</h3> 
<p>Hover over the "Dropdown" link to see the dropdown menu.</p> 

</body> 
</html>

我發現這http://www.w3schools.com/css/css_navbar.asp。希望它對你有用。

來源

2016-09-13 11:05:43

在此代碼設置你的CSS佈局 –

下拉導航列表

回答

相關問題