article

Wednesday, December 14, 2011

Simple CSS Vertical Menu

Simple CSS Vertical Menu

Download





<style type="text/css">
.verticalmenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 200px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.verticalmenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 10px 0;
padding-left: 10px;
text-decoration: none;
}
* html .verticalmenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}
.verticalmenu li a:visited, .verticalmenu li a:active{
color: white;
}
.verticalmenu li a:hover{
background-image: url(images/glossyback2.gif);
}
</style>
<ul class="verticalmenu">
<li><a href="#" >r-ednalan.blogspot.com</a></li>
<li><a href="#" >CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Web Design</a></li>
</ul>

Related Post