Css drop down menu tutorial

In this tutorial you will learn how to create a drop down menu using css styles. This tutorial includes the code, explantion of the code and the download zip file with the drop down menu.

Steps to Create a CSS Menu

  1. Create the menu using <ul> </ul> tags
  2. Customize Level One Menu
  3. Customize Level Two menu
  4. Add Hover Effects
  5. Customize Links

Step 1 – Create the Menu

We will use nested <ul> </ul> tags to create two levels of menus.
The First Level will be the main menu. The Second Level will have the sub menus.

We will use two different selector id’s to identify the two menu level.
We’ll use id=level-one for the main menu. Level One Menu will be visible all the time. id=level-two will be used for every sub-menu that we declare. These Level Two Sub-Menus will be hidden. The Sub-Menu will be visible when mouse hovers over the Level One Menu items.

Here’s the code for the Level 2 menu. Paste this code in the body section of your page.

<ul id=level-one> <!-- For creating the main menus. -->
<li>First</li>
<li>Second 
	<ul id=level-two> <!-- For creating the sub menus. -->
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
	</ul>
</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>

Step 2 – Customize Menu Level One <ul>

Now we’ll customize the menu by removing the bullets and align the menu horizontally.

Stylesheet Code For Level One <ul> </ul>

ul#level-one{
background:
 #FFFFFF url("images/menu-back.png") repeat-x bottom left;;
background:
 -moz-linear-gradient(top,  #FFFFFF,  #f0f0f0);
background:
 -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0));
line-height: 36px;
list-style: none ;
position: relative;
width: 90%;
height: 36px;
}

The Explanation

Line 1 › ul#level-one{
→ Selector Id for the <ul id=level-one> in the Level One Menu Items..

Line 2 ›
background: #FFFFFF url(“images/menu-back.png”) repeat-x bottom left;
→ For IE ›
→ White(#FFFFFF) Color background if image is not found.
→ Background image for the Level One Menu Items.

›› menu-background-imagemenu-background-imagemenu-background-image ‹‹ Right Click and Save this image
→ The image is then repeated along the x-axis.
Line 4 ›
background: -moz-linear-gradient(top, #FFFFFF, #f0f0f0);
→ For Mozilla Firefox ›
→ I’ve used gradient here .
→ The gradient is applied from top.
→ White(#FFFFFF) Color is the start color from the top.
→ Grey(#F0F0F0) Color is the end color at the bottom.

Line 6 ›
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0));
→ For Webkit Browsers (Safari, Chrome) ›
→ linear is the type of gradient.
→ White(#FFFFFF) Color starts from the left top.
→ Grey(#F0F0F0) Color ends at left bottom.

Line 8 › line-height: 36px;
→ This code will set your menu items in the middle(Vertically) of Level One Menu.

Line 9 › list-style: none ;
→ This code will remove the bullets.

Line 10 › position: relative ;
→ This will be helpful later, when we apply hover effect on the menu.
→ The sub-menu will appear above the contents below.

Line 11 › width: 90% ;   Line 12 › height: 36px ;
→ Sets the width and height for the Level One Menu;

Step 3 – Customize Menu Level Two

<ul> tag

When the mouse is moved over the Level One Menu the submenu appears otherwise it is hidden. To make the sub-menu appear on hover we will have to hide the sub-menus first. Then on hover we’ll make it appear.

Stylesheet Code For Level Two <ul> </ul>

ul#level-two{
background:
 #FFA500 url("images/menu-grad.png") repeat-x;
background:
 -moz-linear-gradient(top, #FFA500, #FF4500);
background:
 -webkit-gradient(linear, left top, left bottom, from(#ffa500), to(#ff4500));
display: none;
list-style: none ;
margin: auto;
padding: 12px;
position: absolute;
width: 200px;
}

Explanation

Line 1 › ul#level-two{
→ Selector Id for the <ul id=level-two> for the Level Two Sub-Menu Items.

Line 2 ›
background: #FFA500 url(“images/menu-grad.png”) repeat-x bottom left;
→ For IE ›
→ Light Orange(#FFA500) Colored background if image is not found.
→ Background image for the Level two Menu Items.

›› menu-background-imagemenu-background-imagemenu-background-image ‹‹ Right Click and Save this image
→ The image is then repeated along the x-axis.

Line 4 ›
background: -moz-linear-gradient(top, #FFA500, #FF4500);
→ For Mozilla Firefox ›
→ The gradient is applied from top.
→ Light Orange(#FFA500) Color is the start color from the top.
→ Orange(#FF4500) Color is the end color at the bottom.

Line 6 ›
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500));
→ For Webkit Browsers (Safari, Chrome) ›
→ linear is the type of gradient.
→ White(#FFA500) Color starts from the left top.
→ Grey(#FF4500) Color ends at left bottom.

Line 8 › display: none ;
→ This property hides the Sub-Menu items.

Line 9 › list-style: none ;
→ Removes bullets or numbering from the <li> tags inside its parent <ul> element.

Line 10 › margin: 0 ;
→ This property removes any default margin inside <ul> element.

Line 11 › padding: 12px ;
→ This property provides 12 pixel padding from all sides to its <li> child elements.

Line 12 › position: absolute ;
→ Absolute Position Property positions the Sub-Menu Items above the other html elements below.

Line 13 › width: 200px ;
→ Sets width for the Sub-Menu Items.

<li> tag

Stylesheet Code for <li> </li>

ul#level-two li{
   line-height: 30px;
   padding-left: 6px;
   width: 200px;
}

The Explanation

Line 1 › ul#level-two li{
→ Selector Id for <li> inside <ul id=level-two>.

Line 2 › line-height 30px;
→ Sets Spacing between two lines or in this case sets spacing between two <li> elements.

Line 3 › padding-left: 6px;
→ Positions the contents inside <li> tag, slightly right (6 pixel).

Line 4 › width: 200px;
→ Sets Width(200 pixel) for Level Two <li> Sub-Menu items.

Step 4 – Customize Hover Effects

<ul> Hover Effect

To make the Sub menu appear when the mouse hovers over the Level One Menu Items, hover property has to be defined for the Level Two <ul> element.

ul#level-one li:hover > ul#level-two{
   display: block;
}

The Explanation

Line 2 › ul#level-one li:hover > ul#level-two{
→ The code before ” > “(ul#level-one li:hover) is the parent selector.
→ The code after ” > “(ul#level-two) is the child selector.
→ This code will run for Level Two(child) <ul> element whenever a mouse hovers over <li>(parent) element of Level One Menu Item.
Line 3 › display: block;
→ To Unhide the Sub-Menu Items when mouse hovers on Level One Menu Item.

<li> Hover Effect ›› Level Two

We’ll apply background image to the all the <li> elements of Level Two Sub-Menu Items, when a mouse hovers over it.


ul#level-two li:hover{
background:
 #FFFFFF url("images/menu-li.png") repeat-y;
background:
 -moz-linear-gradient(top,  #FFFFFF,  #C0C0C0);
background:
-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#C0C0C0));
}

The Explanation

Line 2 › ul#level-two li:hover{
→ Selector for <li> in the Level Two Sub-Menu when mouse is hovers over it.

Line 3 ›
background: #FFFFFF url(“images/menu-li.png”) repeat-y;
→ For IE ›
→ White(#FFFFFF) Color background if image is not found.
→ Background image for the Level two Menu Items.
→ The image is then repeated along the y-axis.

›› menu-background-imagemenu-background-imagemenu-background-image ‹‹ Right Click and Save this image

Line 5 ›
background: -moz-linear-gradient(top, #FFFFFF, #C0C0C0);
→ For Mozilla Firefox ›
→ The gradient is applied from top.
→ White(#FFFFFF) Color is the start color from the top.
→ Grey(#C0C0C0) Color is the end color at the bottom.

Line 7 ›
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C0C0C0));
→ For Webkit Browsers (Safari, Chrome) ›
→ linear is the type of gradient.
→ White(#FFFFFF) Color starts from the left top.
→ Grey(#C0C0C0) Color ends at left bottom.

Step 5 – Customize Links

We will now remove all the underlines & use different colors for the links inside the <li> tags.

a {
   color: #FFFFFF ;
   text-decoration: none;
   width: 200px;
}

Line 1 › a {
→ Selector for all the links tags(<a></a>).

Line 2 › color: #FFFFFF ;
→ Sets White(#FFFFFF) Color to all the text inside links tags(<a></a>).

Line 3 › text-decoration: none ;
→ Removes the underline from the links.

Line 4 › width: 200px ;
→ Sets the width of links.

Download Menu Example

CSS Tutorials and Resources


Pinterest