纯css三级导航
<!DOCTYPE HTML>
<html>
<head>
<title>css 三级导航</title>
<style>
.nav {
min-width:920px;
}
li {
list-style-type:none;
}
.nav ul li {
width:200px;
height:50px;
background:#eee;
float:left;
border:1px solid #ddd;
display:block;
text-align:center;
line-height:50px;
}
.nav ul li:hover {
background:#fae1b5;
}
/*****二级导航*****/
.nav ul li ul {
margin:0;
padding:0;
display:none;
}
.nav ul li:hover ul {
display:block;
}
.nav ul li ul li {
width:200px;
height:50px;
margin:0;
padding:0;
background:#d6e7f3;
border:1px solid #ddd;
}
.nav ul li ul li:hover {
background:#dbfff3;
}
/****三级导航****/
.nav ul li:hover ul li ul {
display:none;
}
.nav ul li ul li ul {
width:200px;
height:50px;
display:none;
margin-left:200px;
margin-top:-50px;
}
.nav ul li:hover ul li:hover ul{
width:200px;
height:50px;
display:block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>网站首页
<ul>
<li>二级导航
<ul>
<li>三级导航</li>
<li>三级导航</li>
</ul>
</li>
<li>二级导航
<ul>
<li>三级导航</li>
<li>三级导航</li>
</ul>
</li>
<li>二级导航
<ul>
<li>三级导航</li>
<li>三级导航</li>
</ul>
</li>
<li>二级导航
<ul>
<li>三级导航</li>
<li>三级导航</li>
</ul>
</li>
</ul>
</li>
<li>联系我们
<ul>
<li>二级导航
<ul>
<li>三级导航</li>
<li>三级导航</li>
</ul>
</li>
<li>二级导航</li>
<li>二级导航</li>
<li>二级导航</li>
</ul>
</li>
<li>关于我们
<ul>
<li>二级导航</li>
<li>二级导航</li>
<li>二级导航</li>
<li>二级导航</li>
</ul>
</li>
<li>站点统计
<ul>
<li>二级导航</li>
<li>二级导航</li>
<li>二级导航</li>
<li>二级导航</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
扫一扫
1955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
