• Article Written 
  • on 09.07.2009
  •  at 12:40 PM
  •  by admin

Simple Verticale Menu Tutorial

This is a very simple, verticale css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect.

css-vertical-menu

Step : 1

First of all let us write CSS code for menu. here goes the code..



#nav ul {
margin:0;
padding:0;
list-style-type:none;
}






#nav ul li {
display: inline; /*IE 6*/
}






#nav ul li a {
display:block;
background:#d9d9d9;
width:200px;
text-decoration:none;
padding:4px/*padding for top, bottom*/ 7px /*padding for left, right*/;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;






#nav ul li a:hover {
border-left-color:#0099FF;
color:#0066FF;
background:#c4c4c4;
}

Step : 2

Now we create a basic html structure.



<div id="nav">
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Sitemap</a></li>
          <li><a href="#">Contact</a></li>
    < /ul>
 </div>

Yeah..! its done! see how simple is to create a CSS menu… A demo..?

Filed under: Css, Tutorials by admin

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,

Related Articles:

if you enjoyed reading this article, please check out other related articles below:

Untitled Document

Submit a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


CommentLuv Enabled
Untitled Document

    Subscribe

  • Subscribe to our feed
  • Subscribe by email
  • Follow us on Twitter
  • WooThemes - Where there's a Woo, there's a way!
  • Domain Dog

.