导航下拉栏 简单方法
html部分
<ul class="nav"> <li>首页</li> <li>产品</li> <li>服务 <ul> <li>设计</li> <li>研发</li> <li>交付</li> </ul> </li> <li>关于我们 <ul> <li>博客园</li> <li>FlyElephant</li> <li>keso</li> </ul> </li> </ul><ul class="nav"> <li>首页</li> <li>产品</li> <li>服务 <ul> <li>设计</li> <li>研发</li> <li>交付</li> </ul> </li> <li>关于我们 <ul> <li>博客园</li> <li>FlyElephant</li> <li>keso</li> </ul> </li> </ul>
css部分
ul,li{ list-style: none; } .nav { margin-left: 200px; margin-top:200px; } .nav li { float: left; width: 150px; background-color: #00C5CD; padding-top: 10px; padding-bottom: 10px; text-align: center; border-right: 1px solid #fff; } .nav li:last-child { border-right: none; } .nav li ul { width: 150px; position: absolute; margin-top: 10px; left: 9999px; } .nav li ul li { background-color: #00EE00; border-bottom: 1px solid #fff; } .nav li:hover ul { left: auto; }
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul,li{
list-style: none;
}
.nav {
margin-left: 200px;
margin-top:200px;
}
.nav li {
float: left;
width: 150px;
background-color: #00C5CD;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-right: 1px solid #fff;
}
.nav li:last-child {
border-right: none;
}
.nav li ul {
width: 150px;
position: absolute;
margin-top: 10px;
left: 9999px;
}
.nav li ul li {
background-color: #00EE00;
border-bottom: 1px solid #fff;
}
.nav li:hover ul {
left: auto;
}
</style>
</head>
<body>
<ul class="nav">
<li>首页</li>
<li>产品</li>
<li>服务
<ul>
<li>设计</li>
<li>研发</li>
<li>交付</li>
</ul>
</li>
<li>关于我们
<ul>
<li>博客园</li>
<li>FlyElephant</li>
<li>keso</li>
</ul>
</li>
</ul><ul class="nav">
<li>首页</li>
<li>产品</li>
<li>服务
<ul>
<li>设计</li>
<li>研发</li>
<li>交付</li>
</ul>
</li>
<li>关于我们
<ul>
<li>博客园</li>
<li>FlyElephant</li>
<li>keso</li>
</ul>
</li>
</ul>
</body>
</html>
