How to Create Multi Level Drop Down Side Navigation Menu with CSS

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

Crating of multi level drop down side navigation menu contains two process. One is creating levels in an HTML page and another is creating a CSS file to decorate the levels. So, without wasting of time let's start creating level by level side navigation menu.


Create CSS file

 In this step you just need to write the below code in notepad or any html editor and save the file as style.css and keep this file in script directory under the main directory.

  *{
    margin-top: 0px;
    margin:0px;
    padding:0px;
    }

#wrapper {
    max-width: 1300px;
    margin: auto;

    margin-top: 5px;
    margin-bottom: 2px;
    }

/*** side navigation coding start ***/ 
  
#sidenav ul{
    list-style-type: none;
    font: bold 14px sans-serif;
    text-align: center;
    width: 250px;
    letter-spacing: 1px;
}

#sidenav ul li {
    position: relative;
    background-color: #045240;
    border-bottom: 1px dotted #000;
    border-bottom-color: white;
    border-radius: 50px;
}

#sidenav ul li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 12px;
    }
       
#sidenav ul li: hover {
    background-color: #0e6cf4;
    text-decoration: none;
    border-radius: 20px 0px 20px;   
    }

#sidenav ul li: hover > ul {
     visibility: visible;
     opacity: 1;
     }

#sidenav ul ul{
    position: absolute;
    visibility: hidden;
    left: 100%;
    top: -2%;
}

 /** coding for level 2 decoration **/

#sidenav ul ul li {
    background-color: #494187;
    border-radius: 50px;
}

#sidenav ul ul li:hover {
    background-color:   #0e6cf4;
    text-decoration: none;
    border-radius: 0px 20px 0px;
}

/*** side navigation coding end ***/ 

**** if you wish to decorate the 3rd level, 4th level and 5th level menu then add the below code in the bottom of the above codes. Otherwise all the sub level decoration remains same as with the 2nd level.

 /** coding for level 3 decoration **/

#sidenav ul ul ul li {
    background-color:  #525053;
    border-radius: 50px;
}

#sidenav ul ul ul li:hover {
    background-color:   red;
    text-decoration: none;
    border-radius: 0px 20px 0px;
}

 /** coding for level 4 decoration **/

#sidenav ul ul ul ul li {
    background-color: red;
    border-radius: 50px;
}

#sidenav ul ul ul ul li:hover {
    background-color: gray;
    text-decoration: none;
    border-radius: 0px 20px 0px;
}

 /** coding for level 5 decoration **/

#sidenav ul ul ul ul ul li {
    background-color: green;
    border-radius: 50px;
}

#sidenav ul ul ul ul ul li:hover {
    background-color: #e687f5;
    text-decoration: none;
    border-radius: 0px 20px 0px;
}

CSS coding ends. Now save the file as style.css. Remember the extension of this file should be .css . You may like How to create a multi level dropdown top navigation using CSS.


1st Level Menu

Here, I am going to show you how to create the 1st level side navigation menu. After writing the below code save this file as filename.html (for example supuser.html)

<html>
<head>
<title>supuser.com</title>
<link href="script/style.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div id="wrapper">
<div id="sidenav">

 <ul>
   <li><a href="level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
   <li><a href="#">Level 1</a></li>
   <li><a href="level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
</ul>

</div>
</div>

</body>
</html>

 2nd Level Menu

In this step you will learn how to create 2nd level menu for the side navigation drop down menu. To create a 2nd level menu you have to add the below code just after the blue color </li> tag in the 1st level code.

  <ul>
    <li><a href="level2.html">Level 2</a></li>
    <li><a href="#">Level 2</a></li>
    <li><a href="level2.html">Level 2</a></li>
    <li><a href="level2.html">Level 2</a></li>
  </ul>

After adding the above code the 1st level code looks like the below codes.

<html>
<head>
<title>supuser.com</title>
<link href="script/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
<div id="sidenav">

<ul>
   <li><a href="level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
   <li><a href="#">Level 1</a>

<ul>
   <li><a href="level2.html">Level 2</a></li>
   <li><a href="#">Level 2</a></li>
   <li><a href="level2.html">Level 2</a></li>
   <li><a href="level2.html">Level 2</a></li>
 </ul>

   </li>
   <li><a href="level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
 </ul>

</div>
</div>

</body>
</html>

 3rd Level Menu

In this step you will learn how to create 3rd level menu for the side navigation drop down menu. To create a 3nd level menu you have to add the below code just after the blue color </li> tag in the 2nd level code.

 <ul>
      <li><a href="level3.html">Level 3</a></li>
      <li><a href="#">Level 3</a></li>
      <li><a href="level3.html">Level 3</a></li>
 </ul>


After adding the above code the 2nd level code looks like the below codes.

<html>
<head>
<title>supuser.com</title>
<link href="script/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
<div id="sidenav">

<ul>
   <li><a href="level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
   <li><a href="#">Level 1</a>

 <ul>
    <li><a href="level2.html">Level 2</a></li>
    <li><a href="#">Level 2</a>

  <ul>
    <li><a href="level3.html">Level 3</a></li>
    <li><a href="#">Level 3</a></li>
    <li><a href="level3.html">Level 3</a></li>                   
  </ul>

    </li>
    <li><a href="level2.html">Level 2</a></li>
    <li><a href="level2.html">Level 2</a></li>
 </ul>

    </li>
    <li><a href="level1.html">Level 1</a></li>
    <li><a href="Level1.html">Level 1</a></li>
    <li><a href="Level1.html">Level 1</a></li>
    </ul>

</div>
</div>

</body>
</html>

 4th Level Menu


In this step you will learn how to create 4th level menu for the side navigation drop down menu. To create a 4th level menu you have to add the below code just after the blue color </li> tag in the 3rd level code.

   <ul>
       <li><a href="level4.html">Level 4</a></li>
       <li><a href="#">Level 4</a></li>
       <li><a href="level4.html">Level 4</a></li>
   </ul>

After adding the above code the 3rd level code looks like the below codes. 

<html>
<head>
<title>supuser.com</title>
<link href="script/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
<div id="sidenav">

  <ul>
      <li><a href="level1.html">Level 1</a></li>
      <li><a href="Level1.html">Level 1</a></li>
      <li><a href="#">Level 1</a>

  <ul>
      <li><a href="level2.html">Level 2</a></li>
      <li><a href="#">Level 2</a>

  <ul>
      <li><a href="level3.html">Level 3</a></li>
      <li><a href="level3.html">Level 3</a>

  <ul>
      <li><a href="level4.html">Level 4</a></li>
      <li><a href="#">Level 4</a></li>
      <li><a href="level4.html">Level 4</a></li>
  </ul>

     </li>
     <li><a href="level3.html">Level 3</a></li>                   
   </ul>

      </li>
      <li><a href="level2.html">Level 2</a></li>
      <li><a href="level2.html">Level 2</a></li>
  </ul>

    </li>
   <li><a href="level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
   <li><a href="Level1.html">Level 1</a></li>
    </ul>

</div>
</div>

</body>
</html>

 5th Level Menu

In this step you will learn how to create 5th level menu for the side navigation drop down menu. To create the 5th level menu you have to add the below code just after the blue color </li> tag in the 4th level code.

    <ul>
         <li><a href="level5.html">Level 5</a></li>
         <li><a href="level5.html">Level 5</a></li>
         <li><a href="level5.html">Level 5</a></li>
    </ul>

After adding the above code the 4th level code looks like the below codes.
<html>
<head>
<title>supuser.com</title>
<link href="script/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
<div id="sidenav">

 <ul>
    <li><a href="level1.html">Level 1</a></li>
    <li><a href="Level1.html">Level 1</a></li>
    <li><a href="#">Level 1</a>

    <ul>
       <li><a href="level2.html">Level 2</a></li>
       <li><a href="#">Level 2</a>

       <ul>
          <li><a href="level3.html">Level 3</a></li>
          <li><a href="level3.html">Level 3</a>

         <ul>
            <li><a href="level4.html">Level 4</a></li>
            <li><a href="#">Level 4</a>

            <ul>
                <li><a href="level5.html">Level 5</a></li>
                <li><a href="level5.html">Level 5</a></li>
                <li><a href="level5.html">Level 5</a></li>
            </ul>

            </li>
            <li><a href="level4.html">Level 4</a></li>
          </ul>

          </li>
        <li><a href="level3.html">Level 3</a></li>                 
       </ul>

       </li>
       <li><a href="level2.html">Level 2</a></li>
       <li><a href="level2.html">Level 2</a></li>
     </ul>

    </li>
    <li><a href="level1.html">Level 1</a></li>
    <li><a href="Level1.html">Level 1</a></li>
    <li><a href="Level1.html">Level 1</a></li>
 </ul>

</div>
</div>

</body>
</html>


In this way you can create multi level drop down side navigation menu. If you think this post help you and others then don't forget to share your views in the comment box and pass it to the social media platforms also. Also don't forget to this blog...

How to Create Multi Level Drop Down Side Navigation Menu with CSS How to Create Multi Level Drop Down Side Navigation Menu with CSS Reviewed by Mani on October 07, 2019 Rating: 5

No comments:

Powered by Blogger.