如何創建沒有浮動下拉導航欄？

Question

如何創建下拉導航欄而不使用浮動？我試過，但我有點遠離我的回答，我的代碼如下##

HTML

<div id="nav"> 
<ul> 
    <li><a href="#Animals">Animals</a></li> 
    <li><a href="#birdes">Birds</a></li> 
    <li><a href="#vegetables">Vegetables</a> 
     <ul> 
      <li><a href="#">Okra</a></li> 
      <li><a href="#">Runner Beans</a></li> 
      <li><a href="#">Pumkin</a></li> 
     </ul> 
    </li> 
    <li><a href="#fruits">Fruits</a> 
     <ul> 
      <li><a href="#">Apple</a></li> 
      <li><a href="#">Banana</a></li> 
      <li><a href="#">Orange</a></li> 
      <li><a href="#">Lemom</a></li> 
     </ul> 
    </li> 
</ul> 

CSS

#nav{width:100%;} 
#nav ul{list-style-type:none; margin:0; padding:0; background-color:#9900CC;} 
#nav ul li{display:inline;} 
#nav ul li a{color:#ffffff; text-decoration:none; display:inline-block; padding:15px; font-weight:700;} 
#nav ul li a:hover{background-color:#5F6975;} 
#nav ul ul{position:absolute; background:#5F6975; display:none;} 
#nav ul li:hover > ul{display:block;} 
#nav li ul li{display:block;} 

請幫助我.. ..

Answer 1

您可以使用位置ING和inline-block：

* {margin: 0; padding: 0; list-style: none;} 
 
a {text-decoration: none;} 
 

 
#nav > ul > li {display: inline-block; position: relative; width: 100px; padding: 5px;} 
 
#nav > ul > li ul {position: absolute; display: none;} 
 
#nav > ul > li:hover ul {display: block; border: 1px solid #ccc; width: 100px; padding: 5px;} 
 
#nav a {display: block;}

<div id="nav"> 
 
    <ul> 
 
    <li><a href="#Animals">Animals</a></li> 
 
    <li><a href="#birdes">Birds</a></li> 
 
    <li><a href="#vegetables">Vegetables</a> 
 
     <ul> 
 
     <li><a href="#">Okra</a></li> 
 
     <li><a href="#">Runner Beans</a></li> 
 
     <li><a href="#">Pumkin</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#fruits">Fruits</a> 
 
     <ul> 
 
     <li><a href="#">Apple</a></li> 
 
     <li><a href="#">Banana</a></li> 
 
     <li><a href="#">Orange</a></li> 
 
     <li><a href="#">Lemom</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>