Horizontel Hover orange

Round Horizontel menu

HTML

  • <div class="round_h_menu">
  • <div class="right_bg">
  • <ul>
  • <li><a href="#"><span>CSS Menu</span></a> </li>
  • <li><a href="#"><span>Only For CSS Menu</span></a></li>
  • <li><a href="#"><span>CSS Menu</span></a></li>
  • <li class="noline"><a href="#"><span>CSS Menu Link</span></a></li>
  • </ul>
  • </div>
  • </div>

CSS

  • <style>
  • div.round_h_menu {
  • background:#737171 url(images/top-menu-leftbg.gif) no-repeat left top; font-family:Arial, Helvetica, sans-serif;
  • height:34px;
  • margin:0;
  • padding:0;
  • }
  • div.round_h_menu div.right_bg {
  • background:url(images/top_menu-right.gif) no-repeat right top;
  • height:34px;
  • margin:0;
  • padding:0;
  • text-align:left
  • }
  • div.round_h_menu ul {
  • margin:0;
  • padding:5px 0 5px 2px;
  • list-style:none;
  • }
  • div.round_h_menu ul li {
  • margin:0;
  • padding:0 9px 0 7px;
  • list-style:none;
  • display:inline;
  • float:left;
  • background:url(images/menu-line.gif) no-repeat right;
  • }
  • div.round_h_menu ul li.noline {
  • background:none;
  • }
  • div.round_h_menu ul li a {
  • color:#ffffff;
  • float:left;
  • margin:0;
  • padding:0 0 0 4px;
  • font-size:12px;
  • text-decoration:none;
  • }
  • div.round_h_menu ul li a span {
  • color:#ffffff;
  • padding:4px 30px 5px 26px;
  • display:block;
  • }
  • div.round_h_menu ul li a:hover {
  • background:url(images/top-menu-over-l.gif) no-repeat left top;
  • }
  • div.round_h_menu ul li a:hover span {
  • background:url(images/top-menu-over-r.gif) no-repeat right top;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera