Personal Site CSS Menu Tutorial

This tutorial will show you how to create a beautiful menu for your personal site like my menu..as you can see in my menu aside from the main text it contains some description below it.

Visit DEMO



Start with a DIV tag with id "menu". Followed by an un-ordered list to specify a menu.

Copy and Paste the following lines to where your menu will appear.

<div id="menu">
 <ul>
  <li><a href="#"class="current">Home<br /><span>takes you to<br />Home Page</span></a></li>
  <li><a href="#">Blog<br /><span>takes you to<br />My Blog Posts</span></a></li>  
  <li><a href="#">Projects<br /><span>takes you to<br />My Works</span></a></li>
  <li><a href="#">Templates<br /><span>takes you to<br />Free Webmasters Templates</span></a></li>  
 </ul>
</div>

The CSS Style:

*
it resets the margins and paddings.

*{
 margin:0;
 padding:0;
}

#menu
This selector defines the size of the menu ranges to 90% of the actual size of your total width. The margins are set to 25px. Ignore margins allows you to unset the margins of your HTML elements.

#menu{
 width:90%;
 margin:25px auto;
}

#menu ul
  Under "menu" is <ul> tag that defines the un-ordered list. The following lines allows you remove bullets in your list.

#menu ul{
 list-style:none;
}

#menu li
This specifies your list to align Block(Alignment Settings) and floats your list to the left.

#menu li{
 display:block;
 float:left;
}

#menu li a
Sets the Behavior of your links. Apply background color, sets padding to Top, Left, Bottom and Right. Display alignment to Block and Float menus to left. Set font color and transform you text to Uppercase. Text-decorations set to none to remove underline to your links. Set fonts to Arial, Helvetica, sans-serif. In case some PC's doesn't support Arial, Helvetica as an alternative font and so on. Set font size to 18 pixels and set the height of the list to 50 pixels.

#menu li a{
 background:#00131e;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#2277bb;
 text-transform:uppercase;
 text-decoration:none;
 font-family: Arial, Helvetica, sans-serif;
 font-size:18px;
 height: 50px;
}

#menu li a span
Specifies the color,size, case, font, and weight of span element. This is used for our small description towards our menu.

#menu li a span{
 color:#337799;
 font-size:10px;
 text-transform:lowercase;
 font-family:Arial, Helvetica, sans-serif;
 font-weight:normal;
}

#menu li a:hover
This specifies the behavior of out Pseudo-class Hover (Main text).

#menu li a:hover{
 background:#00131e;
 text-decoration:none;
}

#menu li a:hover span
This specifies the behavior of out Pseudo-class Hover under span element.

#menu li a:hover span{
 color:#aaddff;
}

Complete CSS Code....

/* CSS Document */
*{
 margin:0;
 padding:0;
}
#menu{
 width:90%;
 margin:25px auto;
}
#menu ul{
 list-style:none;
}
#menu li{
 display:block;
 float:left;
}
#menu li a{
 background:#00131e;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#2277bb;
 text-transform:uppercase;
 text-decoration:none;
 font-family: Arial, Helvetica, sans-serif;
 font-size:18px;
 height: 50px;
}
#menu li a span{
 color:#337799;
 font-size:10px;
 text-transform:lowercase;
 font-family:Arial, Helvetica, sans-serif;
 font-weight:normal;
}
#menu li a:hover{
 background:#00131e;
 text-decoration:none;
}
#menu li a:hover span{
 color:#aaddff;
} 

When your done, try it if it works!