Post
Ask Question

Create Multilevel Navigation Menu with Pure HTML and CSS

Introduction

In this  code we will see how to create multilevel navigation menu using pure HTML and CSS. In this code I will provide the HTML and CSS code. Here three level navigation is achieved and managed each level of menu. 
HTML
  1. <!DOCTYPE html>  
  2. <html lang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <title>Dropdown menu Sample</title>  
  7.         <link rel="stylesheet" type="text/css" href="theme.cssstyle.css">  
  8.         </head>  
  9.         <body>  
  10.             <!-- start menu part-->  
  11.             <div id="Nav">  
  12.                 <div class="Nav_Center">  
  13.                     <ul id="Ul1" class="main-nav">  
  14.                         <li>  
  15.                             <a href="#">Home</a>  
  16.                         </li>  
  17.                         <li class="has-sub ">  
  18.                             <a href="#" class="active">Services</a>  
  19.                             <ul>  
  20.                                 <li>  
  21.                                     <a href="#">Link 1</a>  
  22.                                 </li>  
  23.                                 <li>  
  24.                                     <a href="#">Link 2</a>  
  25.                                 </li>  
  26.                                 <li class="has-sub">  
  27.                                     <a href="#">Link 3</a>  
  28.                                     <ul>  
  29.                                         <li>  
  30.                                             <a href="#">Link 3.1</a>  
  31.                                         </li>  
  32.                                         <li class="last">  
  33.                                             <a href="#">Link 3.2</a>  
  34.                                         </li>  
  35.                                     </ul>  
  36.                                 </li>  
  37.                             </ul>  
  38.                         </li>  
  39.                         <li class="has-sub">  
  40.                             <a href="#">Articles</a>  
  41.                             <ul>  
  42.                                 <li>  
  43.                                     <a href="#">Article 1</a>  
  44.                                 </li>  
  45.                                 <li>  
  46.                                     <a href="#">Article 2</a>  
  47.                                 </li>  
  48.                                 <li class="has-sub">  
  49.                                     <a href="#">Article 3</a>  
  50.                                     <ul>  
  51.                                         <li>  
  52.                                             <a href="#">Article 3.1</a>  
  53.                                             <ul>  
  54.                                                 <li>  
  55.                                                     <a href="#">Article 1.1</a>  
  56.                                                 </li>  
  57.                                                 <li>  
  58.                                                     <a href="#">Article 1.2</a>  
  59.                                                 </li>  
  60.                                                 <li class="has-sub">  
  61.                                                     <a href="#">Article 3</a>  
  62.                                                     <ul>  
  63.                                                         <li>  
  64.                                                             <a href="#">Article 3.1</a>  
  65.                                                         </li>  
  66.                                                         <li class="last">  
  67.                                                             <a href="#">Article 3.2</a>  
  68.                                                         </li>  
  69.                                                     </ul>  
  70.                                                 </li>  
  71.                                             </ul>  
  72.                                         </li>  
  73.                                         <li class="last">  
  74.                                             <a href="#">Article 3.2</a>  
  75.                                         </li>  
  76.                                     </ul>  
  77.                                 </li>  
  78.                             </ul>  
  79.                         </li>  
  80.                         <li class="has-sub">  
  81.                             <a href="#">Test</a>  
  82.                             <ul>  
  83.                                 <li>  
  84.                                     <a href="#">Test 1</a>  
  85.                                 </li>  
  86.                                 <li>  
  87.                                     <a href="#">Test 2</a>  
  88.                                 </li>  
  89.                                 <li class="has-sub">  
  90.                                     <a href="#">Test 3</a>  
  91.                                     <ul>  
  92.                                         <li>  
  93.                                             <a href="#">Test 3.1</a>  
  94.                                         </li>  
  95.                                         <li class="last">  
  96.                                             <a href="#">Test 3.2</a>  
  97.                                         </li>  
  98.                                     </ul>  
  99.                                 </li>  
  100.                             </ul>  
  101.                         </li>  
  102.                         <li>  
  103.                             <a href="#">About</a>  
  104.                         </li>  
  105.                         <li>  
  106.                             <a href="#">Testinomial</a>  
  107.                         </li>  
  108.                         <li>  
  109.                             <a href="#">News</a>  
  110.                         </li>  
  111.                     </ul>  
  112.                 </div>  
  113.             </div>  
  114.             <!-- end menu part-->  
  115.         </body>  
  116.     </html>    
CSS: 
  1. ul.main-nav   
  2. {  
  3.   background: #470439 left top repeat-x;  
  4. }  
  5.   
  6. ul.main-nav, ul.main-nav li, ul.main-nav ul   
  7. {  
  8.   list-style: none;  
  9.   margin: 0;  
  10.   padding: 0;  
  11.   color: #fff;  
  12. }  
  13.   
  14. ul.main-nav a   
  15. {  
  16.   display: block;  
  17.   color: #fff;  
  18.   font-family: Myriad Pro;  
  19.   font-size: 14px;  
  20.   text-decoration: none;  
  21. }  
  22.   
  23. ul.main-nav   
  24. {  
  25.   position: relative;  
  26.   z-index: 597;  
  27.   float: left;  
  28. }  
  29.   
  30. ul.main-nav li  
  31. {  
  32.   float: left;  
  33.   line-height: 1.3em;  
  34.   vertical-align: middle;  
  35.   zoom: 1;  
  36.   padding: 0;  
  37. }  
  38.   
  39. ul.main-nav li.hover, ul.main-nav li:hover ,ul.main-nav li a:hover   
  40. {  
  41.   position: relative;  
  42.   z-index: 599;  
  43.   background: #80a531 repeat-x scroll center top transparent;  
  44.   color: #FFFFFF;  
  45. }  
  46.   
  47. ul.main-nav ul   
  48. {  
  49.   display: none;  
  50.   position: absolute;  
  51.   top: 100%;  
  52.   left: 0;  
  53.   z-index: 598;  
  54.   width: 182px;  
  55.   background: #470439;  
  56. }  
  57.   
  58. ul.main-nav ul li   
  59. {  
  60.   float: none;  
  61. }  
  62.   
  63. ul.main-nav ul ul   
  64. {  
  65.   top: -2px;  
  66.   left: 100%;  
  67. }  
  68.   
  69. ul.main-nav li:hover > ul   
  70. {  
  71.   display: block;  
  72. }  
  73.   
  74. ul.main-nav li a:hover , ul.main-nav li a.active   
  75. {  
  76.   background: #80a531 center top repeat-x;  
  77.   color: #ffffff;  
  78. }  
  79.   
  80. ul.main-nav li a   
  81. {  
  82.   color: #ffffff;  
  83.   font-family: Myriad Pro;  
  84.   font-size: 13px;  
  85.   text-decoration: none;  
  86.   padding: 0 15px;  
  87.   font-weight: normal;  
  88.   margin: 0 0px 0 0px;  
  89.   height: 37px;  
  90.   line-height: 37px;  
  91.   text-align: center;  
  92.   border-right: 1px solid #7C2F6A;  
  93.   text-transform: uppercase;  
  94. }  
  95.   
  96. ul.main-nav li.none a  
  97. {  
  98.   color: #ffffff;  
  99.   font-family: Myriad Pro;  
  100.   font-size: 13px;  
  101.   text-decoration: none;  
  102.   padding: 0 15px 0 15px;  
  103.   font-weight: normal;  
  104.   margin: 0 1px 0 0px;  
  105.   float: left;  
  106.   height: 37px;  
  107.   line-height: 37px;  
  108.   text-align: center;  
  109.   border-right: none;  
  110.   text-transform: uppercase;  
  111. }  
  112.   
  113. ul.main-nav li > ul   
  114. {  
  115.   border: 1px solid #7C2F6A;  
  116. }  
  117.   
  118. ul.main-nav li > ul li   
  119. {  
  120.     /*For adding bottom line list item */  
  121.   border-bottom: 1px solid #7C2F6A;  
  122. }  
  123.   
  124. ul.main-nav li > ul li a   
  125. {  
  126.   border-right: none;  
  127. }