Vertical Menus - Simple CSS 04.

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:#FDF5E6;margin:0;padding:0;}
.menulist li, .menulist li a {display:block;position:relative;border:1px solid #000;}
.menulist li {border-width:1px 0;margin:2px 1px;}
.menulist li a {border-width:0 1px;margin:0 -1px;padding:6px 10px;background-color:#ADD8E6;text-decoration:none;color:#555;}
.menulist li a:hover {color:#000;background-color:#D0E7F0;}
.menulist li > a:hover, .menulist li:hover {border-color:#333;}

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