Posted By

settysantu on 12/10/08


Tagged

css download free menus pro


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

basicmagic
bok


Glossy Slide Menu


 / Published in: CSS
 

URL: http://www.styledmenus.com

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

  1. CSS Code
  2.  
  3. #menu_007{width:100%;}
  4. #menu_007 ul{list-style:none;}
  5. #menu_007 li{list-style:none;display:block;float:left;}
  6. #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;
  7. padding:0 0 0 7px;text-decoration:none;}
  8. #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;}
  9. #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;}
  10. #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;}
  11. #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;}
  12. #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;}
  13.  
  14.  
  15. HTML CODE
  16.  
  17. <div id="menu_007">
  18. <ul>
  19. <li><a href="#" class="current"><span>home</span></a></li>
  20. <li><a href="#"><span>about us</span></a></li>
  21.  
  22. <li><a href="#"><span>services</span></a></li>
  23. <li><a href="#"><span>solutions</span></a></li>
  24. <li><a href="#"><span>contact us</span></a></li>
  25. </ul>
  26. </div>

Report this snippet  

You need to login to post a comment.