How To Create Multi Level Top Navigation Bar With CSS

Hello friends, welcome to my blog. In this post, I am going to show you how to create a multi level drop down top navigation menu using CSS. I assure you that this post will definitely help you to create a multi level drop down top navigation menu with minimal coding. You can find various post and videos on internet regarding creation of multi level drop down top navigation menu, but a few of them works. Although a few of them works but they use many codes that puzzles your mind.

To create a multi level top navigation, at first you have to create an HTML page and after that you have to create a CSS file to decorate the levels. So, without wasting of time let's start creating a multi level top navigation menu.

Create Multi Level Dropdown Menu in HTML

At first you need to create a multi level dropdown top navigation menu using notepad or any other html editor. Here, I have create a five level drop down menu for your ready reference and the codes are given below.

<html>
<head>
<title>supuser</title>
<link href="script/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="topnav">
<ul>   
    <li><a href="filename.html">Level 1</a></li>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="filename.html">Level 2</a></li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="filename.html">Level 3</a></li>
                    <li><a href="#">Level 3</a>
                        <ul>
                            <li><a href="filename.html">Level 4</a></li>
                            <li><a href="#">Level 4</a>
                                <ul>
                                    <li><a href="filename.html">Level 5</a></li>
                                    <li><a href="filename.html">Level 5</a></li>
                                    <li><a href="filename.html">Level 5</a></li>
                                </ul>                           
                            </li>
                            <li><a href="filename.html">Level 4</a></li>
                        </ul>                   
                    </li>
                    <li><a href="filename.html">Level 3</a></li>
                </ul>           
            </li>   
            <li><a href="filename.html">Level 2</a></li>           
        </ul>   
    </li>
    <li><a href="filename.html">Level 1</a></li>
    <li><a href="filename.html">Level 1</a></li>
    <li><a href="filename.html">Level 1</a></li>
    <li><a href="filename.html">Level 1</a></li>
    <li><a href="filename.html">Level 1</a></li>
</ul>
</div>
</div>
</body>
</html>

After creation of the file save it as filename.html. After that you have If create a CSS file. You may like How to create a multi level dropdown side navigation using CSS.

CSS File Codes

You can also use notepad or any other html editor to create a css file.

*{
    margin-top: 0px;
    margin: 0px;
    padding: 0px;
}
/** wrapper codes **/

#wrapper{
    max-width: 1300px;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}

/*** top menu navigation ***/

#topnav ul {
            float: left;
            list-style-type: none;
            font: bold 14px sans-serif;
            height: 50px;
        }

#topnav ul li {
            float: left;
            position: relative;           
            background-color: #0e6cf4;
            width: 150px;
            border-radius: 2px;
        }

#topnav ul li a {
            display: block;
            color: white;
            padding: 15px;
            text-decoration: none;   
        }
       
#topnav ul li:hover {
            background: red;
            border-radius: 50px 50px 50px 50px;
            border-top: 2px dotted #ffffff;           
            border-bottom: 2px dotted #ffffff;
        }       

/** 2nd level coding **/

#topnav ul li:hover > ul {
            visibility: visible;
            opacity: 1;
        }
       
#topnav ul ul {
            position: absolute;
            visibility: hidden;
            margin-top: 2px;                   
        }
       
#topnav ul ul li {
    background-color: #5d6d7e;
    text-decoration: none;
    border-radius: 10px 50px 50px 10px;
    width: 180px;
    border-bottom: 1px dotted #000;
    border-bottom-color: white;
}

#topnav ul ul li a {
            display: block;
            font: bold 12px sans-serif;
            text-decoration: none;
            color: white;
            padding: 6px;
            text-align: center;
        }
       
#topnav ul ul li:hover {
    background-color: indigo;
    border-radius: 0px;
    border-top: 0px dotted white;
    border-bottom: 3px dotted white;
}

/*** mandatory coding for 3rd level ***/

#topnav ul ul ul {
            position: absolute;
            left: 100%;
            top: 0;           
        }

That's it! If you wish to decorate 3rd level or 4th level and so on then add the below css codes with the above code.

/** coding to decorate 3rd level ***/

#topnav ul ul ul li {
    background-color:  #85929e ;
    text-decoration: none;
    border-radius: 10px 50px 50px 10px;
    width:200px;
    border-bottom: 1px dotted #000;
    border-bottom-color: white;
}
       
#topnav ul ul ul li:hover {
    background-color: indigo;
    text-decoration: none;
    border-radius: 10px 50px 50px 10px;
    border-top: 0px dotted #000;
    border-top-color: white;
    border-bottom: 3px dotted #000;
    border-bottom-color: white;
}


/** coding to decorate 4th level ***/

#topnav ul ul ul ul li {
    background-color:  green;
    text-decoration: none;
    border-radius: 10px 50px 50px 10px;
    width:200px;
    border-bottom: 1px dotted #000;
    border-bottom-color: white;
}
       
#topnav ul ul ul ul li:hover {
    background-color: violet;
    text-decoration: none;
    border-radius: 10px 50px 50px 10px;
    border-top: 0px dotted #000;
    border-top-color: white;
    border-bottom: 3px dotted #000;
    border-bottom-color: white;
}

/** codeing to decorate 5th level ***/

#topnav ul ul ul ul ul li {
    background-color: pink;
    text-decoration: none;
    border-radius: 10px 50px 50px 10px;
    width:200px;
    border-bottom: 1px dotted #000;
    border-bottom-color: white;
}
       
#topnav ul ul ul ul ul li:hover {
    background-color: gray;
    text-decoration: none;
    border-radius: 10px 50px 50px 10px;
    border-top: 0px dotted #000;
    border-top-color: white;
    border-bottom: 3px dotted #000;
    border-bottom-color: white;
}

In this way you can  create multi level dropdown top navigation for your blog / website. Feel free to share your views through the comment box and also share the post to your social media platform so that some others get benefit of this post.

How To Create Multi Level Top Navigation Bar With CSS How To Create Multi Level Top Navigation Bar With CSS Reviewed by Mani on October 03, 2019 Rating: 5

No comments:

Powered by Blogger.