Multi Level Dropdown Menu on Hover with CSS and jQuery

Create multi level dropdown menu on hover with CSS and jQuery to navigate site’s content more easily.

Plugin Overview

Plugin: Multi-Level-Dropdown-Menu
Author: saeedfouda
Licence: MIT Licence
Published: April 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 3 KB

How to Create Multi Level Dropdown Menu on Hover :

1. Load the jQuery and include all the necessary assets into your HTML page for creating multi level dropdown menu.

<!-- jQuery -->
<script src=""></script>

<!-- Multi level Menu CSS -->
<link rel="stylesheet" href="style.css">

<!-- Multi level Menu Js -->
<script src="style.js"></script>

2. Create HTML structure for menu like below and add your links into it.

<ul id="nav">
<li class="site-name"><a href="#"> </a></li>
    <li class="facebook"><a href="#">Home Page</a>
    <li class="yahoo"><a href="#">Yahoo</a>
        <li><a href="#">Yahoo Games »</a>            
                <li><a href="#">Board Games</a></li>
                <li><a href="#">Card Games</a></li>
                <li><a href="#">Puzzle Games</a></li>
                <li><a href="#">Skill Games »</a>
                    <li><a href="#">Yahoo Pool</a></li>
                    <li><a href="#">Chess</a></li>
        <li><a href="#">Yahoo Search</a></li>
        <li><a href="#">Yahoo Answsers</a></li>
    <li class="google"><a href="#">Google</a>
        <li><a href="#">Google mail</a></li>
        <li><a href="#">Google Plus</a></li>
        <li><a href="#">Google Search »</a>
                <li><a href="#">Search Images</a></li>
                <li><a href="#">Search Web</a></li>
    <li class="twitter"><a href="#">Twitter</a>
                <li><a href="#">New Tweets</a></li>
                <li><a href="#">Compose a Tweet</a></li>

Be the first to comment

Leave a Reply

Your email address will not be published.


1 × 1 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.