常用css特效样式，持续收集中
2019-11-23 本文已影响0人
编程小石头666
一，三级联动类目
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<style>
.nav {
width: 160px;
height: auto;
position: fixed;
left: 20px;
top: 20px;
margin-top: 0;
}
.nav-li {
width: 100%;
height: auto;
border-bottom: 1px solid #fff;
text-align: center;
line-height: 40px;
background: #333;
color: white;
font-size: 16px;
}
.tit {
width: 100%;
height: 40px;
}
.nav-li:hover ul {
display: block;
}
.nav-li ul {
width: 100%;
height: auto;
background: gray;
list-style-type: none;
padding: 0;
margin: 0;
display: none;
}
.nav-li ul li {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #666;
color: #333333;
text-align: center;
position: relative;
}
/* 三级目录*/
.nav-li ul li:hover .list3 {
display: block;
}
.list3 {
width: 160px;
height: auto;
position: absolute;
left: 160px;
top: 0;
display: none;
}
.list3-item {
background: gold;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-li">
<div class="tit">一级类目1</div>
<ul>
<li>
二级栏目1
<div class="list3">
<div class="list3-item">三级目录1-1</div>
<div class="list3-item">三级目录1-2</div>
<div class="list3-item">三级目录1-3</div>
</div>
</li>
<li>二级栏目2
<div class="list3">
<div class="list3-item">三级目录2-1</div>
<div class="list3-item">三级目录2-2</div>
<div class="list3-item">三级目录2-3</div>
</div>
</li>
<li>二级栏目3
<div class="list3">
<div class="list3-item">三级目录3-1</div>
<div class="list3-item">三级目录3-2</div>
<div class="list3-item">三级目录3-3</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">一级类目2</div>
<ul>
<li>二级栏目2-1</li>
<li>二级栏目2-2</li>
<li>二级栏目2-3</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">一级类目3</div>
<ul>
<li>二级栏目3-1</li>
<li>二级栏目3-2</li>
<li>二级栏目3-3</li>
</ul>
</div>
</div>
</body>
</html>
