I have a navigation menu that works well and looks good.
The HTML for the menu is:
<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-->
But I want to change it so it is something like:
<li><a href="#">The Salon</a>
<ul>
<li><a href="#">Hair Cut</a></li>
</ul>
</li>
So under the salon, a drop down menu would come up with 'Hair Cut'.
I know this is possible with CSS, but the problem is I have a lot of CSS with the divs shown above (menubar, welcome, menu_items etc). Do you know the most simplest way to make a simple dropdown?
The simplest way in a nutshell:
https://jsfiddle.net/svArtist/2jd9uvx0/
hide lists inside other lists
upon hovering list elements, show the child lists
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>
Why don't you use Jquery UI? https://jqueryui.com/menu/
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
Added the sub menu using li:hover
Here is the fiddle - https://jsfiddle.net/gkdj6y5x/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.