Posted By

settysantu on 12/10/08

Tagged

Versions (?)

Last Edited at 12/10/08 02:53am

Statistics

Viewed 320 times

Favorited by 1 user(s)

Related snippets

Glossy Slide Menu

/ Published in: CSS

Glossy slide door black menu with blue hover styled which can be used on white backgrounds

Highlighted TextExpand

CSS Code

#menu_007{width:100%;}
#menu_007 ul{list-style:none;}
#menu_007 li{list-style:none;display:block;float:left;}
#menu_007 li a{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left.jpg) no-repeat left;line-height:43px;
padding:0 0 0 7px;text-decoration:none;}
#menu_007 li a span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}
#menu_007 li a:hover{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;height:66px;}
#menu_007 li a:hover span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;color:#fff;height:66px;}
#menu_007 li a.current{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;line-height:43px;padding:0 0 0 7px;text-decoration:none;}
#menu_007 li a.current span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}

HTML CODE

<div id="menu_007">
	<ul>
		<li><a href="#" class="current">home</a></li>
		<li><a href="#">about us</a></li>

<li><a href="#">services</a></li>
		<li><a href="#">solutions</a></li>
		<li><a href="#">contact us</a></li>								
	</ul>
</div>

URL: http://www.styledmenus.com

Report this snippet Tweet