Post
Ask Question

How to Create a Horizontal Hierarchical Menu Using HTML And CSS

Introduction

 
I am planning to write a series of articles on creating menus in various ways and this is the first one in the series. This article will explain how to create a simple 2-level menu using HTML and CSS only.
 
We know there are many ways to create an HTML menu but at times, we need to use only HTML/CSS in the project to create a nice menu. So, let's get started.
 
We will create a HTML structure as below using <ul> and <li> tags. Write the following code in your HTML file where you want to place the menu.
  1. <div class="menu">  
  2.     <ul>  
  3.         <li><a href="#">Menu 1</a></li>  
  4.         <li><a href="#">Menu 2</a>  
  5.             <ul>  
  6.                 <li><a href="#">Menu 2.1</a></li>  
  7.                 <li><a href="#">Menu 2.2</a></li>  
  8.                 <li><a href="#">Menu 2.3</a></li>  
  9.             </ul>  
  10.         </li>  
  11.         <li><a href="#">Menu 3</a>  
  12.             <ul>  
  13.                 <li><a href="#">Menu 3.1</a></li>  
  14.                 <li><a href="#">Menu 3.2</a></li>  
  15.                 <li><a href="#">Menu 3.3</a></li>  
  16.             </ul>  
  17.         </li>  
  18.     </ul>  
  19. </div> 
Now, we have the structure ready. Definitely, the current menu does not look good and we will now apply some CSS to make it look beautiful. Write the following code in the <head> section.
  1. <style type="text/css">  
  2.     .menu  
  3.     {  
  4.         width: 500px;  
  5.         margin: 0px auto;  
  6.         font-family: Arial, Helvetica, sans-serif;  
  7.         font-weight: bold;  
  8.         font-size: 14px;  
  9.     }  
  10.     .menu ul li a:link, div ul li a:visited  
  11.     {  
  12.         display: block;  
  13.         background-color: #f1f1f1;  
  14.         color: #000;  
  15.         text-align: center;  
  16.         text-decoration: none;  
  17.         padding: 4px;  
  18.         border-bottom: 1px solid #fff;  
  19.         width: 150px;  
  20.     }  
  21.     .menu ul li a:hover  
  22.     {  
  23.         background-color: #ccc;  
  24.     }  
  25.     .menu ul li ul li a:link, li ul li a:visited  
  26.     {  
  27.         display: block;  
  28.         background-color: #f1f1f1;  
  29.         color: #000;  
  30.         text-align: center;  
  31.         text-decoration: none;  
  32.         padding: 4px;  
  33.         border-bottom: 1px solid #fff;  
  34.         width: 150px;  
  35.     }  
  36.     .menu ul li ul li a:hover  
  37.     {  
  38.         background-color: #ccc;  
  39.     }  
  40.     .menu ul  
  41.     {  
  42.         list-style-type: none;  
  43.         margin: 0px;  
  44.         padding: 0px;  
  45.     }  
  46.     .menu ul li  
  47.     {  
  48.         float: left;  
  49.         margin-left: 5px;  
  50.     }  
  51.     .menu ul li ul li  
  52.     {  
  53.         float: none;  
  54.         margin-left: 0px;  
  55.     }  
  56.     .menu ul li ul  
  57.     {  
  58.         display: none;  
  59.     }  
  60.     .menu li:hover ul  
  61.     {  
  62.         display: block;  
  63.     }  
  64. </style> 
Save the HTML file and double-click on it to view it in the browser. Your menu should look something like the following screenshot.
 
menu
 
You can read other parts of this series below:
I hope you like this article! Cheers!


Similar Articles
Rebin Infotech
Think. Innovate. Grow.