DIV+CSS教程_一个兼容ie6/7/8/ff/safari/Chrome/opera的下拉菜单
最近一直再看CSSplay里的代码，发现一个兼容ie6/7/8/ff/safari/Chrome/opera的下拉菜单，no hacks、no js。这种做法不知道有人用过吗？请说说你的对这种方法的理解吧。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>an image dropdown menu - no hacks</title>
<style>
.nav,.nav ul { padding:0px; margin:0px; list-style:none;}
.nav { margin:0 auto; height:32px; text-align:center;}
.nav a { background:#069; height:32px; text-decoration:none;display: block; position: relative; color:#fff;}
.nav li ul { left:0px; float: left; position: relative; top: 0px;}
.nav li {float: left; }
.nav ul li {clear: left;}
.nav1, .nav1 a {width:110px;}
.nav1 a { background:#690;}
.nav2, .nav2 a {width: 102px}
.nav2 a { background:#595959; margin-right:-101px}
.nav3,.nav3 a {width: 95px}
.nav3 a { background:#960; margin-right: -94px}
.nav4, .nav4 a {width: 143px}
.nav4 a { background:#a80; margin-right: -142px}
.nav5, .nav5 a {width: 137px}
.nav5 a { background:#f00;margin-right: -30px}
.nav li.drop ul li a {width: 230px; margin-right: -200px; background:#069}
.nav li.drop ul li a:hover{ background:#cdcdcd}
.nav a.main {margin-top: 10000px; float: left}
.nav .drop {margin-top: -10000px}
.nav a:hover { background:#069; z-index: 10; margin-right:0px; }
.nav .nav2 ul a:hover {margin-right: -128px}
.nav .nav3 ul a:hover {margin-right: -135px}
.nav .nav4 ul a:hover {margin-right: -87px}
.nav ul:hover {clear: left}
</style>
</head>
<body>
<ul class="nav">
<li class="nav1 drop"><a href="#" class="main">Home</a></li>
<li class="nav2 drop"><a href="#" class="main">Products</a>
<ul>
<li><a href="">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
<li><a href="#">Products</a> </li>
</ul>
</li>
<li class="nav3 drop"><a href="" class="main">Services</a>
<ul>
<li><a href="#">Services</a> </li>
<li><a href="#">Services</a> </li>
<li><a href="#">Services</a> </li>
<li><a href="#">Services</a> </li>
</ul>
</li>
<li class="nav4 drop"><a href="#" class="main">Special Offer</a>
<ul>
<li><a href="#">Special Offer</a> </li>
<li><a href="#">Special Offer</a> </li>
<li><a href="#">Special Offer</a> </li>
<li><a href="#">Special Offer</a> </li>
</ul>
</li>
<li class="nav5 drop"><a href="#" class="main">Privacy Policy</a>
<ul>
<li><a href="#">Special Offer</a> </li>
<li><a href="#">Special Offer</a> </li>
<li><a href="#">Special Offer</a> </li>
<li><a href="#">Special Offer</a> </li>
</ul>
</li>
</li>
</ul>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
