Javascript HTMl CSS下拉菜单导航

我有一个导航菜单，运行良好，看起来不错

菜单的HTML为：

<div id="menubar">
    <div id="welcome">
        <h1><a href="#">Cedars Hair <span>Academy</span></a></h1>
    </div><!--close welcome-->
    <div id="menu_items">
        <ul id="menu">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="index.html">The Salon</a></li>
            <li><a href="index.html">Testimonials</a></li>
            <li><a href="index.html">Courses</a></li>
            <li><a href="index.html">The Staff</a></li>
            <li><a href="index.html">Contact Us</a></li>
        </ul>
    </div><!--close menu-->
</div><!--close menubar-->  

但我想把它改成这样：

<li><a href="#">The Salon</a>
    <ul>
        <li><a href="#">Hair Cut</a></li>
    </ul>
</li>

所以在沙龙下面，一个下拉菜单会出现“理发”

---

我知道这在CSS中是可能的，但问题是我有很多CSS和上面显示的div（菜单栏、欢迎、菜单项等）。您知道制作简单下拉列表的最简单方法吗？

为什么不使用Jquery UI？

$（函数（）{
$（“#菜单”）.menu（）；
});

简而言之，最简单的方法是：

在其他列表中隐藏列表

悬停列表元素时，显示子列表

ul{
显示：无；
显示：绝对；
底部：-100%；
}
李{
位置：相对位置；
}
李：悬停>ul{
显示：表格；
}

使用

li:hover

---

这里有大量在线教程。其中一个非常简单：剩下的就是样式和偏好您可以将其与动画/过渡相结合，并根据需要定位元素。但既然你问的是最简单的方法：我会说就是这样

<script>
  $(function() {
    $( "#menu" ).menu();
  });
  </script>