HTML
-
<div class=”onlycssmenu clearfix”>
-
<ul class=”clearfix”>
-
<li class=”first”><a href=”#” class=”active” title=”Only css menu”><span>Only css Menu</span></a></li>
-
<li><a href=”#” title=”Css Menu”><span>Css Menu</span></a></li>
-
<li><a href=”#” title=”Css Menu”><span>Css Menu</span></a></li>
-
<li><a href=”#” title=”Only Css Menu”><span>Web 2.0 Menu</span></a></li>
-
<li class=”nopipe”><a href=”#” title=”Css Menu”><span>Web 2.0 Menu</span></a></li>
-
</ul>
-
</div>
CSS
-
<style>
-
.clearfix:after {
-
content: “.”;
-
display:block;
-
height:0;
-
font-size:0;
-
clear:both;
-
visibility:hidden;
-
}
-
.clearfix {
-
display:inline-block;
-
}
-
* html .clearfix {
-
height:1%;
-
}
-
.clearfix {
-
display:block;
-
}
-
.onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
-
background-image:url(images/menu_stip.png);
-
background-repeat:no-repeat;
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:12px;
-
}
-
.onlycssmenu {
-
height:41px;
-
line-height:41px;
-
background-position:-1005px 0px;
-
padding-left:10px
-
}
-
.onlycssmenu ul {
-
background-position: right -45px;
-
height:41px;
-
line-height:41px;
-
margin:0;
-
padding:0;
-
list-style:none;
-
}
-
.onlycssmenu ul li {
-
display:inline;
-
float:left;
-
padding:6px 6px 0 5px;
-
background:url(images/menu_div.png) no-repeat right 11px;
-
}
-
.onlycssmenu ul li.nopipe {
-
background:none;
-
}
-
.onlycssmenu ul li a {
-
float:left;
-
padding-left:15px;
-
color:#FFFFFF;
-
text-decoration:none;
-
}
-
.onlycssmenu ul li a span {
-
float:left;
-
padding-right:15px;
-
height:30px;
-
line-height:30px;
-
}
-
.onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
-
background-position: -1005px -90px;
-
color:#530316;
-
}
-
.onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
-
background-position:right bottom;
-
}
-
</style>
Khả năng tương thích Menu Horizontal html Css của trình duyệt
Download Soure: Menu horizontal html css