如何添加水平子菜單？無法弄清楚，添加html和css

Question

嘿我想有一個下拉菜單在相同的風格，我知道這很簡單，但我仍然是新的製作網站，我無法弄清楚我自己。

這裏是我的HTML文件：

<nav> 
     <ul> 
      <li><a href="./index.html"><span class ="s2">Startpagina</span></a></li> 
      <li><a href="./aanwinsten.html">Aanwinsten</a></li> 
      <li><a href="./catalogus.html">Catalogus</a></li> 
       <ul class="sub"> 
        <li><a href="#">Pages</a></li> 
        <li><a href="#">Archives</a></li> 
        <li><a href="#">New Posts</a></li> 
       </ul> 
      <li><a href="./uitlening.html">Uitlening</a></li> 
      <li><a href="./reservatie.html">Reservatie</a></li> 
      <li><a href="./suggestie.html">Suggestie</a></li> 
      <li><a href="./contact.html">Contact</a></li> 
     </ul> 
    </nav> 

，這是我的CSS文件：

nav li 
{ 
    display: inline; 
    padding-right: 20px; 

} 
nav { 
    text-align: center; 
    margin: -20px 0px 0px 0px; 

} 
nav ul{ 
    background-color: rgba(126, 4, 0, 0.79); 
    border: 1px solid black; 


} 
nav ul li{ 
    display: inline; 

} 
nav ul li a{ 
    padding-left: 1em; 
    padding-right: 1em; 
    font-size: 12px; 
    font-family: Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    color: lightgray; 
} 
nav ul li a:hover{ 
    color: #999999; 

} 

編輯：我編輯/李的問題，我已經添加到了我的CSS：

nav ul ul{display: none; position: relative;} 
nav li ul li{float:none;display: inline-block; } 
nav ul li:hover ul {display: inline-block;} 

這給這個時候我胡佛在它：http://gyazo.com/e095151ebf644b4b44c7556193328163

Answer 1

您關閉了li，這會使子菜單ul太早。

嘗試這方面的工作：

<nav> 
     <ul> 
      <li><a href="./index.html"><span class ="s2">Startpagina</span></a></li> 
      <li><a href="./aanwinsten.html">Aanwinsten</a></li> 
      <li><a href="./catalogus.html">Catalogus</a> 
       <ul class="sub"> 
        <li><a href="#">Pages</a></li> 
        <li><a href="#">Archives</a></li> 
        <li><a href="#">New Posts</a></li> 
       </ul> 
      </li> **<! - See the difference?-->** 
      <li><a href="./uitlening.html">Uitlening</a></li> 
      <li><a href="./reservatie.html">Reservatie</a></li> 
      <li><a href="./suggestie.html">Suggestie</a></li> 
      <li><a href="./contact.html">Contact</a></li> 
     </ul> 
    </nav> 

JSFiddle

Answer 2

的問題就在這裏：

<li><a href="./catalogus.html">Catalogus</a></li> 
     <ul class="sub"> 
      <li><a href="#">Pages</a></li> 
      <li><a href="#">Archives</a></li> 
      <li><a href="#">New Posts</a></li> 
     </ul> 
    <li><a href="./uitlening.html">Uitlening</a></li> 

你需要保持<ul>以前<li>內。所以要這樣說：

<li><a href="./catalogus.html">Catalogus</a> 
     <ul class="sub"> 
      <li><a href="#">Pages</a></li> 
      <li><a href="#">Archives</a></li> 
      <li><a href="#">New Posts</a></li> 
     </ul></li> 
    <li><a href="./uitlening.html">Uitlening</a></li> 

現在你可以通過這樣的方式，當你將鼠標懸停在LI它顯示了<UL>標籤定位給予的樣式。

li.drop ul {display: none; position: absolute;} 
li.drop {position: relative} 
li.drop:hover ul {display: block; left: auto; top: auto;}