Vertical Menus - Simple CSS 05.

CSS Code

#sidebar {font:bold .76em Tahoma, Arial, sans-serif;margin:0;padding:0;}
#sidebar ul, .menulist li {list-style:none;margin:0;padding:0;}
.menulist {width:100%;background:#999;margin:0;padding:0;border-bottom:2px solid #999;border-right:2px solid #999;}
.menulist a {display:block;text-decoration:none;margin:2px 0 2px 0;color:#000;background:#ddd;border-width:1px;border-style:solid;border-color:#000;border-left:14px solid #333;padding:4px 14px 6px;}
.menulist a:hover, .menulist li #current {background:#eee;border-color:#000;padding:6px 14px 4px 16px;}

HTML Code

<div id="sidebar">
	<ul class="menulist">
		<li><a href="#" id="current">Menu List 01</a></li>
		<li><a href="#">Menu List 02</a></li>
		<li><a href="#">Menu List 03</a></li>
		<li><a href="#">Menu List 04</a></li>
		<li><a href="#">Menu List 05</a></li>
		<li><a href="#">Menu List 06</a></li>
	</ul>
</div>
Back to top