OnlyCssMenu.com » download css dropdown menu http://www.onlycssmenu.com The best example of CSS base menu Wed, 17 Feb 2010 17:02:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Horizontal DropDown Orange Classic http://www.onlycssmenu.com/horizontal-dropdown-orange-classic.html http://www.onlycssmenu.com/horizontal-dropdown-orange-classic.html#comments Sun, 06 Sep 2009 07:10:20 +0000 admin http://www.onlycssmenu.com/?p=157 DropDown Horizontal Orange Classic

…

]]> DropDown Horizontal Orange Classic

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
]]> http://www.onlycssmenu.com/horizontal-dropdown-orange-classic.html/feed 0