Red vista style menu

Redmenu vista style

HTML

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

CSS

  • <style>
  • div.red_v_h_menu {
  • background: url(images/red_vista_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:2px solid #FFF;
  • }
  • div.red_v_h_menu ul {
  • margin:0;
  • background:url(images/red_vista_menu_right.gif) no-repeat right top;
  • padding:0 0 0 10px;
  • height:30px;
  • list-style:none;
  • }
  • div.red_v_h_menu ul li {
  • margin:0;
  • padding:0 2px 0 1px;
  • list-style:none;
  • background:url(images/red_vista_v_line.gif) no-repeat right;
  • display:inline;
  • float:left;
  • }
  • div.red_v_h_menu ul li.noline {
  • background:none;
  • }
  • div.red_v_h_menu ul li a {
  • color:#ffffff;
  • float:left;
  • margin:0;
  • height:30px;
  • padding:0 25px;
  • font-size:12px;
  • text-decoration:none;
  • }
  • div.red_v_h_menu ul li a:hover {
  • background:url(images/red_vista_menu_hover.gif) no-repeat center bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera