Blue vista style Menu

Bluemenu vista style

HTML

  • <div class="blue_h_menu">
  • <ul>
  • <li><a href="#">Only Css Menu</a> </li>
  • <li><a href="#">CSS Menu</a></li>
  • <li><a href="#">CSS3 Menu</a></li>
  • <li class="noline"><a href="#">Web 2.0 CSS Menu</a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • div.blue_h_menu {
  • background: url(images/blue_menu_left.gif) no-repeat left top;
  • height:30px;
  • margin:0;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • line-height:30px;
  • font-weight:bold;
  • padding:0 0 0 10px;
  • border-bottom:solid 2px #FFF;
  • }
  • div.blue_h_menu ul {
  • margin:0;
  • background:url(images/blue_menu_right.gif) no-repeat right top;
  • padding:0 0 0 10px;
  • height:30px;
  • list-style:none;
  • }
  • div.blue_h_menu ul li {
  • margin:0;
  • padding:0 2px 0 1px;
  • list-style:none;
  • background:url(images/blue_menu_v_line.gif) no-repeat right bottom;
  • display:inline;
  • float:left;
  • }
  • div.blue_h_menu ul li.noline {
  • background:none;
  • }
  • div.blue_h_menu ul li a {
  • color:#ffffff;
  • float:left;
  • margin:0;
  • height:30px;
  • padding:0 25px;
  • font-size:12px;
  • text-decoration:none;
  • }
  • div.blue_h_menu ul li a:hover {
  • background:url(images/blue_menu_hover.gif) no-repeat center bottom;
  • }</style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera