HTMl CSS下拉導航

Question

我有一個導航菜單，效果很好，看起來也不錯。

菜單的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>

因此，在沙龍下，下拉菜單將帶有“ Hair Cut”。

我知道CSS可以做到這一點，但是問題是我有很多CSS，上面顯示了div（菜單，歡迎，menu_items等）。 您知道最簡單的下拉菜單最簡單的方法嗎？

Answer 1

簡而言之，最簡單的方法是：

https://jsfiddle.net/svArtist/2jd9uvx0/

1. 隱藏其他列表中的列表

2. 懸停列表元素后，顯示子列表

 ul ul { display:none; display:absolute; bottom:-100%; } li{ position:relative; } li:hover>ul { display:table; } 

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

Answer 2

為什么不使用Jquery UI？ https://jqueryui.com/menu/

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

Answer 3

使用li:hover添加了子菜單

這是小提琴-https: //jsfiddle.net/gkdj6y5x/