How to Create Drop Down Menu with CSS

CSS Drop Down Menu Tutorial copy

CSS Drop down menu is the bet way to add navigation in a website. Creating CSS menu is a simple task in coparision to others. This tutorial has been built to let you know how to create CSS Drop Down Menu for your website. Without further ado lets proceed.

Step 1 – Creating Markup

We are going to Create a Menu with sub menu. The Menu Structure is shown below.

menu struct

The HTML Code for above menu structure is shown below.

<ul id="navigation">

 <li><a href="#">Tablet</a></li>
 <li class="sub">  <a href="#">Phones</a>
           <ul>
           <li><a href="#">Nokia</a></li>
           <li><a href="#">Samsung</a></li>
           <li><a href="#">LG</a></li>
           </ul>
  </li>
  <li><a href="#">PC</a>
 </li>
</ul>

In Above HTML code, Phone Menu contains a Sub Menu with the list of Mobile Phone Companies. Copy the above code and paste in between body tag of your HTML file. Class Sub in above code has been used to define sub menu.

Sub menu will appear whenever someone will hover the mouse over Phones menu link

Step 2 – Add some style to Main Menu using CSS

Now, lets add styles in main menu we have just created. For the same we need to create some CSS code defining style of main menu.

<style type="text/css">
#navigation {
margin: 0;
padding: 0 1em;
background: #170270;
/* background: url(menu-bg.png) repeat-x top left; */
height: 3em;
list-style: none;
}

#navigation > li {
float: left;
height: 100%;
margin-right: 0.5em;
padding: 0 1em;
}

#navigation > li > a {
float: left;
height: 100%;
color: #FFFFFF;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
}

#navigation > li > a:hover {
color: orange;
text-decoration: underline;
}
</style>

Step 3: Creating a contextual positioning

To make permanent appear of sub menu under its parent menu we need to create contexual positioning of items.

#navigation > li.sub {
position: relative;
}

Step 4: Styling the sub-menu

#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #4624DA;
position: absolute;
top: -1000em;
}

#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
}

#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}

#navigation > li.sub ul li a:hover {
background: #A1A1A2;
text-decoration: underline;
}

Step 5: Showing the sub-menu

We can adjust the top property of sub menu to display it.

#navigation > li.sub:hover ul {
top: 3em;
}

Now your Drop Down Menu is ready to use. This Menu will be appear as shown below.
Drop Down Menu

Click on link below to download Sample File

Download Sample