css Attractive Vertical Menu

html


<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Overview</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Expertice</a></li>
 <li><a href="#">Contact</a></li>
 </ul>

css

*
{
 margin:0;
 padding:0;
}
ul
{
 list-style:none;
 width:300px;
}
ul li
{
 color:#000000;
 background:#6699FF;
 padding:5px;
 margin:5px;
}
ul li a
{
 text-decoration:none;
 color:#FF0000;
 display:block;
 border-right:20px solid #FFFFFF;
}
ul li a:hover
{
 text-decoration:none;
 color:#FFFFFF;
 display:block;
 border-right:20px solid #FF0000;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s