How to create awesome menu

In this tutorial you going to create some awesome menu.
This is one of my favorite menu i like to use in my designs.
Menu like this looks great in any designs and is easy to create with no to much hassle.
Lets start:

In your css style you have to insert this code:

#menu {
      margin:0px auto;
      padding:10px 0 0 0px;
}



#menu ul {
      margin:0;
      padding:0; 
}



#menu ul li {
     display:block;
     padding:0; 
     float:left;
     text-align:left;
     margin-right:2em;
}



#menu li a { 
     color:#000;
     font:bold 14px arial;
     text-decoration:none;
     line-height: 1.3em; 
     display:block; 
}



#menu li a:hover { 
     color:#fff; 
}



#menu li span { 
     font:11px arial; 
     color:#fff; 
     margin:0; 
}



#menu li span:hover  {
     color:#000;
}

I guess you have this without problem.
Now go ahead and open your html file.
In your html file you need to insert this code:

<div id="menu"> 

<ul>
<li><a href="#">Menu01<br /><span>Short description</span></a></li>
<li><a href="#">Menu02<br /><span>Short description</span></a></li>
<li><a href="#">Menu03<br /><span>Short description</span></a></li>
<li><a href="#">Menu04<br /><span>Short description</span></a></li>
<li><a href="#">Menu05<br /><span>Short description</span></a></li>
</ul>

             </div>

Congratulations!!! you just create some awesome menu.
I just hope you just learn something from this tutorial.
Enjoy the beauty of this menu.;)

» Posted in: Css Tutorials

This article hasn't been commented yet.