Horizontal Classic Menu

Horizontal-orange-classic

HTML

  • <ul id="OCSSM_Horizontal-orange-classic">
  • <li><a href="#" title="Horizontal Css Menu">Horizontal Css Menu</a></li>
  • <li><a href="#" title="Css Menu">Css Menu</a></li>
  • <li><a href="#" title="Only Css Menu">Only Css Menu</a></li>
  • <li><a href="#" title="Css Menu">Css Menu</a></li>
  • </ul>

CSS

  • <style>
  • #OCSSM_Horizontal-orange-classic {
  • margin:0;
  • padding:0px;
  • list-style:none;
  • background:url(images/horizontal_d_orange_classic_bg.gif) repeat-x top;
  • height:29px;
  • width:99%;
  • border:solid 1px #c93300;
  • border-width:1px 1px 1px 0;
  • }
  • #OCSSM_Horizontal-orange-classic li {
  • display:inline;
  • position:relative;
  • float:left;
  • }
  • #OCSSM_Horizontal-orange-classic li a {
  • display:block;
  • float:left;
  • height:29px;
  • line-height:29px;
  • padding:0 25px;
  • text-decoration:none;
  • color:#FFFFFF;
  • font-weight:normal;
  • font-size:12px;
  • border-left:solid 1px #c93300;
  • }
  • #OCSSM_Horizontal-orange-classic li a:hover {
  • color:#a9401b;
  • background:#FFFFFF;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera