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>
Khả năng tương thích menu drop down horizontal của trình duyệt
Download Source: Menu drop down horizontal