Creating Multi-layered Drop down Menu using HTML AND CSS : Tutorial 2

How does Drop down Menu exactly works?

In Previous article: creating Drop down menu we learnt how to create basic horizontal menu and how to customize it. In this article we will learn to create Drop down navigation on hovering navigation. To understand this tutorial you should have an idea about what is hover, what is active etc. You can check about it in tutorial 1.

In such navigation we expect a vertical menu when we hover a mouse pointer on some menu item. At the same time the vertical menu should disappear when we remove the mouse pointer. To do these we use some very simple CSS. Now without wasting much time on theoretical things let’s start creating a drop down navigation.

drop down menu

HTML structure of navigation :

In a simple one layered menu we wrapped list into one unordered list. So obviously for Drop down menu we are going to wrap ul tag under li tag which is already wrapped under our main ul tag. Basic HTML structure is going to be something like this.

<ul>       // Horizontal main menu

<li></li>    // individual menu item

<li>

<ul>                       //vertical drop down menu

<li></li>

<li></li>    // individual menu item in drop down list

<li></li>

</ul>

</li>

<li></li>

<li></li>

</ul>

  • Our basic HTML structure will be as follows .

<ul id=”menu”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Admissions</a>

<ul>

<li><a href=”#”>Engineering</a></li>

<li><a href=”#”>MBA</a></li>

<li><a href=”#”>MCA</a></li>

<li><a href=”#”>Graduate</a></li>

</ul>

</li>

<li><a href=”#”>Results</a></li>

<li><a href=”#”>Examinations</a>

<ul>

<li><a href=”#”>Engineering</a></li>

<li><a href=”#”>MBA</a></li>

<li><a href=”#”>MCA</a></li>

<li><a href=”#”>Graduate</a></li>

</ul>

</li>

<li><a href=”#”>contact</a></li>

</ul>

HTML tutorials for absolute beginners : Understanding the basics

CSS OF THE MENU :

#menu, #menu ul{

margin: 0px;

padding: 0px;

list-style-type: none;

}

#menu a {

display: block;

}

#menu li {

float: left;

}

#menu li a:link,a:visited {

display: block;

color: #FFF;

width: 100px;

background-color:#000;

padding: 7px;

font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;

text-decoration:none;

text-align:center;

}

#menu li a:hover,a:active {

display: block;

color: #FFF;

width: 100px;

background-color:#F9F;

padding: 7px;

font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;

text-decoration:none;

text-align:center;

}

#menu li ul li {

float: none;

}

#menu li ul {                          // we make display: none for vertical menu. It hides the vertical menu

display: none;

position: absolute;

}

#menu li:hover ul {                // here we make display: block which shows vertical menu on hover

display: block;

font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;

padding: 5px;

width: 100px;

}

Understanding the working of CSS :

  • Our aim is to display vertical box only when our mouse pointer is on some menu item.
  • Here vertical box is li ul. We make it display:none so that it does not display unless we hover on li.
  • Now we want to display menu items on hover. So we make li:hover ul { disaplay: block ;}. It displays the drop down menu on hovering.
  • You can download source files below for better understanding.

download

  • If you have some problems please ask them in comments section. For more customizations and features n navigation visit our next article on this topic.

About Ajinkya Thete

Ajinkya Thete is a full time professional blogger keeps interest in web development, latest technology.

One comment

  1. Im obliged for the article post.Really looking forward to read more. Really Cool.

Leave a Reply