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
