How To Create Multilevel Dropdown Menu Using HTML/CSS

Submitted by alpha_luna on Wednesday, April 20, 2016 - 15:51.
In the previous tutorial, we create Mega Menu using the script. In this article, we are going to learn on How To Create Multilevel Dropdown Menu Using HTML/CSS without script. This source code is very simple and easy, and it's a pure CSS and HTML only. Multilevel Menu - HTML This HTML source code is used for displaying menu in multilevel.
  1. <ul id="menu">
  2.         <li class="first_Menu"><a href="#">Menu 1</a>
  3.         <ul class="sub_Menu">
  4.                 <li class="first_Menu"><a href="#">Example 1 <span class="expand">&raquo;</span></a>
  5.                         <ul class="sub_Menu">
  6.                         <li><a href="#">Example 1.1</a></li>
  7.                         <li><a href="#">Example 1.2</a></li>
  8.                         <li><a href="#">Example 1.3</a></li>
  9.                         </ul>
  10.                 </li>
  11.                 <li><a href="#">Example 2</a></li>
  12.                 <li><a href="#">Example 3</a></li>
  13.                 <li><a href="#">Example 4</a></li>
  14.         </ul>
  15.         </li>
  16.         <li class="first_Menu"><a href="#">Menu 2</a>
  17.         <ul class="sub_Menu">                  
  18.                 <li><a href="#">Example 1</a></li>
  19.                 <li><a href="#">Example 2</a></li>
  20.                 <li class="first_Menu"><a href="#">Example 3<span class="expand">&raquo;</span></a>
  21.                         <ul class="sub_Menu">
  22.                         <li><a href="#" nowrap>Example 3.1</a></li>
  23.                         <li><a href="#" nowrap>Example 3.2</a></li>
  24.                         </ul>
  25.                 </li>
  26.                 <li><a href="#">Example 4</a></li>
  27.         </ul>
  28.         </li>
  29.         <li class="first_Menu"><a href="#">Menu 3</a>
  30.         <ul class="sub_Menu">                  
  31.                 <li><a href="#">Example 1</a></li>
  32.                 <li class="first_Menu"><a href="#">Example 2 <span class="expand">&raquo;</span></a>
  33.                         <ul class="sub_Menu">
  34.                         <li><a href="#">Example 2.1</a></li>
  35.                         <li><a href="#">Example 2.2</a></li>
  36.                         <li><a href="#">Example 2.3</a></li>
  37.                         </ul>
  38.                 </li>
  39.                 <li><a href="#">Example 3</a>
  40.                 </li>
  41.                 <li><a href="#">Example 4</a></li>
  42.         </ul>
  43.         </li>
  44. </ul>
Multilevel Menu - CSS And, this is our style.
  1. <style type="text/css">
  2. #menu {
  3.         width:400px;
  4.         margin:auto;
  5. }
  6. .first_Menu {
  7.         display: block;
  8.         position: relative;
  9.         float: left;
  10.         line-height: 30px;
  11.         background-color: blue;
  12.         border-right:blue 1px solid;
  13. }
  14. .first_Menu a {
  15.         margin: 10px;
  16.         color: #FFFFFF;
  17.         font-size:20px;
  18.         text-decoration: none;
  19. }
  20. .first_Menu:hover > ul {
  21.         display:block;
  22.         position:absolute;
  23. }
  24. .sub_Menu {
  25.         display: none;
  26. }
  27. .sub_Menu li {
  28.         background-color: azure;
  29.         line-height: 30px;
  30.         border-bottom:#CCC 1px solid;
  31.         border-right:#CCC 1px solid;
  32.         width:100%;
  33. }
  34. .sub_Menu li a {
  35.         color: #000000;
  36. }
  37. ul {
  38.         list-style: none;
  39.         margin: 0;
  40.         padding: 0px;
  41.         min-width:10em;
  42. }
  43. ul ul ul {
  44.         left: 100%;
  45.         top: 0;
  46.         margin-left:1px;
  47. }
  48. li:hover {
  49.         background-color: red;
  50. }
  51. .first_Menu li:hover {
  52.         background-color: #d0d0d0;
  53. }
  54. .expand {
  55.         font-size:12px;
  56.         float:right;
  57.         margin-right:5px;
  58. }
  59. </style>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
CSS dropdown Menu
Dropdown List
Dropdown Menu by using HTML & CSS
Multiple Selection in Dropdown list

Add new comment

About text formats
  • 954 views