如何添加水平子菜单？无法弄清楚，添加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;}