如何创建没有浮动的下拉导航栏？

Question

如何在不使用float的情况下创建下拉导航栏？我尝试了但是我的答案有点远,我的代码如下##

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

您可以使用定位和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>