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

如何在不使用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>

---

请帮助我……

您可以使用定位和

内联块

：

*{margin:0；padding:0；列表样式：none；}
a{文本装饰：无；}
#nav>ul>li{显示：内联块；位置：相对；宽度：100px；填充：5px；}
#nav>ul>LIUL{位置：绝对；显示：无；}
#nav>ul>li:悬停ul{显示：块；边框：1px实心#ccc；宽度：100px；填充：5px；}
#导航a{显示：块；}

是的，这很有效，实际上我正在准备你的答案……非常感谢你的帮助……是的，我已经做了，非常感谢

#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;}