CSS实现一二三级导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS实现一二三级导航</title>
<style>
*{margin: 0;padding:0;}
.page{width:100%;
height:1000px;
background:#0088CC center top;
}
.nav{
width:160px;
height:auto;
position:fixed;
top:30%;
margin-top: auto;
font-family: "微软雅黑";
}
.nav-li{
width:160px;
height:auto;
background:#333;
border-bottom:1px solid #fff;
text-align: center;
line-height:40px;
color:#fff;
font-size:16px;
cursor: pointer;/*变手*/
}
.nav-li:hover ul{display:inline-block;}
.tit{width:160px;height:40px;}
.nav-li ul{
width:158px;
height:auto;
background: #E1E1E8;
display: none;
}
.nav-li ul li{
width:156px;
height:40px;
border-bottom:1px solid #333;
text-align: center;
line-height:40px;
color:#252525;
position:relative;
}
.nav-li ul li:hover .li-3{display:inline-block;}
.li-3{
width:160px;
height:auto;
position:absolute;
left:160px;
top:0px;
display:none;
}
.li-3con{
width;160px;
height:38px;
background:#444;
text-align: center;
color:#fff;
line-height:38px;
border-bottom:1px solid #0000FF;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<div class="tit">一级导航1</div>
<ul>
<li>
二级导航11
<div class="li-3">
<div class="li-3con">三级栏目111</div>
<div class="li-3con">三级栏目112</div>
<div class="li-3con">三级栏目113</div>
</div>
</li>
<li>
二级导航12
<div class="li-3">
<div class="li-3con">三级栏目121</div>
<div class="li-3con">三级栏目122</div>
<div class="li-3con">三级栏目123</div>
</div>
</li>
<li>
二级导航13
<div class="li-3">
<div class="li-3con">三级栏目131</div>
<div class="li-3con">三级栏目132</div>
<div class="li-3con">三级栏目133</div>
</div>
</li>
<li>
二级导航14
<div class="li-3">
<div class="li-3con">三级栏目141</div>
<div class="li-3con">三级栏目142</div>
<div class="li-3con">三级栏目143</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">一级导航2</div>
<ul>
<li>
二级导航21
<div class="li-3">
<div class="li-3con">三级栏目211</div>
<div class="li-3con">三级栏目212</div>
<div class="li-3con">三级栏目213</div>
</div>
</li>
<li>
二级导航22
<div class="li-3">
<div class="li-3con">三级栏目221</div>
<div class="li-3con">三级栏目222</div>
<div class="li-3con">三级栏目222</div>
</div>
</li>
<li>
二级导航23
<div class="li-3">
<div class="li-3con">三级栏目231</div>
<div class="li-3con">三级栏目232</div>
<div class="li-3con">三级栏目233</div>
</div>
</li>
<li>
二级导航24
<div class="li-3">
<div class="li-3con">三级栏目241</div>
<div class="li-3con">三级栏目242</div>
<div class="li-3con">三级栏目243</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">一级导航3</div>
<ul>
<li>
二级导航31
<div class="li-3">
<div class="li-3con">三级栏目311</div>
<div class="li-3con">三级栏目312</div>
<div class="li-3con">三级栏目313</div>
</div>
</li>
<li>
二级导航32
<div class="li-3">
<div class="li-3con">三级栏目321</div>
<div class="li-3con">三级栏目322</div>
<div class="li-3con">三级栏目323</div>
</div>
</li>
<li>
二级导航33
<div class="li-3">
<div class="li-3con">三级栏目331</div>
<div class="li-3con">三级栏目332</div>
<div class="li-3con">三级栏目333</div>
</div>
</li>
<li>
二级导航34
<div class="li-3">
<div class="li-3con">三级栏目341</div>
<div class="li-3con">三级栏目342</div>
<div class="li-3con">三级栏目343</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号