HTML

• <div class="Hdropdown_red_tab__menu">
• <ul>
• <li><a href="#" >Home</a></li>
• <li><a href="#" id="current">Products</a>
• <ul>
• <li><a href="#">Drop Down CSS Menus</a></li>
• <li><a href="#">Horizontal CSS Menus</a></li>
• <li><a href="#">Vertical CSS Menus</a></li>
• <li><a href="#">Dreamweaver Menus</a></li>
• </ul>
• </li>
• <li><a href="#">FAQ</a>
• <ul>
• <li><a href="#">Drop Down CSS Menus</a></li>
• <li><a href="#">Horizontal CSS Menus</a></li>
• <li><a href="#">Vertical CSS Menus</a></li>
• <li><a href="#">Dreamweaver Menus</a></li>
• </ul>
• </li>
• <li><a href="#">Contact</a></li>
• </ul>
• </div>

CSS

• <style>
• .Hdropdown_red_tab__menu {
• border:none;
• border:0px;
• margin:0px;
• padding:0px;
• font-family:verdana, geneva, arial, helvetica, sans-serif;
• font-size:14px;
• font-weight:bold;
• color:#8e8e8e;
• }
• .Hdropdown_red_tab__menu ul {
• background:url(images/red_tab_dropdown_menu.gif) top left repeat-x;
• height:43px;
• list-style:none;
• margin:0;
• padding:0;
• }
• .Hdropdown_red_tab__menu li {
• float:left;
• padding:0px 8px 0px 8px;
• }
• .Hdropdown_red_tab__menu li a {
• color:#666666;
• display:block;
• font-weight:bold;
• line-height:43px;
• padding:0px 25px;
• text-align:center;
• text-decoration:none;
• }
• .Hdropdown_red_tab__menu li a:hover {
• color:#000000;
• text-decoration:none;
• }
• .Hdropdown_red_tab__menu li ul {
• background:#FFFFFF;
• border-left:1px solid #a80329;
• border-right:1px solid #a80329;
• border-bottom:0px solid #a80329;
• display:none;
• height:auto;
• filter:alpha(opacity=95);
• opacity:0.95;
• position:absolute;
• width:225px;
• z-index:200;
• }
• .Hdropdown_red_tab__menu li:hover ul {
• display:block;
• }
• .Hdropdown_red_tab__menu li li {
• display:block;
• float:none;
• padding:0px;
• width:225px; border-bottom:solid 1px #a80329;
• }
• .Hdropdown_red_tab__menu li ul a {
• display:block;
• font-size:12px;
• font-style:normal;
• padding:0px 10px 0px 15px; line-height:30px;
• text-align:left;
• }
• .Hdropdown_red_tab__menu li ul a:hover {
• background:#890000;
• color:#FFFFFF;
• opacity:1.0;
• filter:alpha(opacity=100);
• }
• .Hdropdown_red_tab__menu p {
• clear:left;
• }
• .Hdropdown_red_tab__menu #current {
• background:url(images/red_tab_dropdown_activemenu.gif) top left repeat-x;
• color:#ffffff;
• }
• </style>

Browser Compatability

• FireFox
• IE7
• Safari
• Opera

• Horizontal Css Menu
  • Sub Menu
  • Sub Menu
  • Sub Menu
  • Sub Menu
• Css Menu
  • Sub Menu
  • Sub Menu
  • Sub Menu
  • Sub Menu
• Only Css Menu
  • Sub Menu
  • Sub Menu
  • Sub Menu
  • Sub Menu
• Css Menu

HTML

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

CSS

• <style>
• #HDropdown-orange-classic {
• margin:0;
• padding:0px;
• list-style:none;
• background:url(images/horizontal_d_orange_classic_bg.gif) repeat-x top;
• height:28px;
• width:99%;
• border:solid 1px #c93300;
• border-width:1px 1px 1px 0;
• }
• #HDropdown-orange-classic li {
• display:inline;
• position:relative;
• float:left;
• }
• #HDropdown-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;
• }
• #HDropdown-orange-classic li a:hover {
• color:#a9401b;
• background:#FFFFFF;
• }
• #HDropdown-orange-classic li ul {
• margin:0;
• padding:0 5px;
• line-height:none;
• position:absolute;
• top:29px;
• left:0;
• border:solid 1px #c93300;
• border-width:0px 1px 1px 1px;
• width:180px;
• display:none;
• background:#FFFFFF;
• }
• #HDropdown-orange-classic li:hover ul {
• display:block;
• }
• #HDropdown-orange-classic li:hover a {
• color:#a9401b;
• background:#FFFFFF;
• }
• #HDropdown-orange-classic li ul li {
• display:block;
• border-bottom:solid 1px #dbdcd9;
• width:100%;
• background:url(images/d_horizontal_red_classic_menu_arrow.gif) no-repeat 3px 12px;
• padding:0 0 0 10px;
• }
• #HDropdown-orange-classic li ul li:last-child {
• border-bottom:0px;
• }
• #HDropdown-orange-classic li ul a {
• border-width:0px;
• color:#909090;
• padding:0 5px 0 0;
• background-color:transparent;
• }
• #HDropdown-orange-classic li:hover ul li a {
• color:#909090;
• }
• #HDropdown-orange-classic li ul li a:hover {
• color:#a9401b;
• }
• </style>

Browser Compatability

• FireFox
• IE7
• Safari
• Opera