we'll going to show you how to create a flashy menu using CSS3. This tutorial is for beginners and can be completed fairly quickly. Make sure you click on the link below to see a demo of the menu and get the source code.

The HTML

Our HTML document contains an unordered list and each list item is a link with an anchor tag. The span contains the name of the menu item.

<ul class="main-ul">
       		<li><a href="#"><span>Home</span></a></li>
       		<li><a href="#"><span>Article</span></a></li>
       		<li><a href="#"><span>Blog</span></a></li>
      		 <li><a href="#"><span>Gallery</span></a></li>
      		 <li><a href="#"><span>About</span></a></li>
       		<li><a href="#"><span>Contact Us</span></a></li>
       		<li><a href="#"><span>Alumini</span></a></li>
      		 <li><a href="#"><span>Portfolio</span></a></li>
 </ul>

The CSS

I am using a pattern for our page background from SubtlePatterns.

body{
	background: #eee url(../images/white_paperboard.png) repeat top right;
}

Now let’s position menu list items. I am using 25% width for each item, so in each row four menu items can be positioned. I’m aligning text of each list item to center.

.main-ul li {
	  float:left;
 		  position:relative;
  		  width:25%;
 		  text-align:center;
 	}

Next let’s position each anchor tag and change text decoration to none. I am using a light gray color background. I am also adding CSS3 transition effects to these elements with a duration of one second.

.main-ul li a {
                      display:block;
	    padding-bottom:20px;
	    padding-right:10px;
	    padding-top:10px;
	    padding-left:10px;
 	    text-decoration:none;
	    position: relative;
 	    z-index: 100;
	    background-color: rgba(164, 164, 164, 0.2);
  	   -webkit-transition: all 1s;
 	   -moz-transition: all 1s;
  	   -o-transition: all 1s;
  	   transition: all 1s;
   }

Read more:http://designfestival.com/how-to-create-a-flashy-menu-using-css/