Red Horizontal Dropdown Tab Menu

Hdropdown red tab menu

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