附上一份四级导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,li{
list-style: none;
}
a{
text-decoration: none;
color:#F6F6F6;
}
li{
width: 100px;height: 40px;
text-align: center;
line-height: 40px;
background-color: #CCCCCC;
}
.int>li:hover{
background-color: #33FFAA;
color:#33FF33;
}
.int li ul{
margin-top:-40px;
margin-left:60px;
}
.on1 li,.on2 li,.on3 li,.on4 li,.on5 li,.on6 li{
background-color: #00AAFF;
display: none;
}
.s1:hover .on1 li{
display:block;
}
.s2:hover .on2 li{
display:block;
}
.s3:hover .on3 li{
display:block;
}
.s4:hover .on4 li{
display:block;
}
.s5:hover .on5 li{
display:block;
}
.s6:hover .on6 li{
display:block;
}
.at li{
width: 100px;height: 40px;
text-align: center;
line-height: 40px;
background-color: #80bb72;
}
.on1-1 .at1,.on1-2 .at1,.on1-3 .at1{
display: none;
}
.on1-1:hover .at1{
display:block;
}
.on1-2:hover .at1{
display:block;
}
.on1-3:hover .at1{
display:block;
}
.pink>ul li{
width: 100px;height: 40px;
text-align: center;
line-height: 40px;
background-color: #42a720;
}
.pink1>ul,.pink2>ul,.pink3>ul,.pink4>ul,.pink5>ul,.pink6>ul{
display: none;
}
.pink1:hover ul{
display: block;
}
.pink2:hover ul{
display: block;
}
.pink3:hover ul{
display: block;
}
.pink4:hover ul{
display: block;
}
.pink5:hover ul{
display: block;
}
.pink6:hover ul{
display: block;
}
</style>
</head>
<body>
<ul class="int">
<li class="s1"><a href="">稷下</a>
<ul class="on1">
<li class="on1-1"><a href="">老夫子</a>
<ul class="at at1">
<li class="pink pink1"><a href="">战士</a>
<ul>
<li><a href="">韧性鞋</a></li>
<li><a href="">极寒</a></li>
<li><a href="">战斧</a></li>
<li><a href="">末世</a></li>
<li><a href="">反甲</a></li>
<li><a href="">魔女</a></li>
</ul>
</li>
<li class="pink pink2"><a href="">刺客</a>
<ul>
<li><a href="">韧性鞋</a></li>
<li><a href="">末世</a></li>
<li><a href="">电刀</a></li>
<li><a href="">无尽</a></li>
<li><a href="">名刀</a></li>
<li><a href="">宗师</a></li>
</ul>
</li>
</ul>
</li>
<li class="on1-2"><a href="">西施</a>
<ul class="at at1">
<li class="pink pink3"><a href="">法师</a>
<ul>
<li><a href="">法穿鞋</a></li>
<li><a href="">回响</a></li>
<li><a href="">痛苦</a></li>
<li><a href="">大帽</a></li>
<li><a href="">辉月</a></li>
<li><a href="">贤者</a></li>
</ul>
</li>
<li class="pink pink4"><a href="">辅助</a>
<ul>
<li><a href="">奔狼</a></li>
<li><a href="">冷缩鞋</a></li>
<li><a href="">圣杯</a></li>
<li><a href="">极寒</a></li>
<li><a href="">痛苦</a></li>
<li><a href="">魔女</a></li>
</ul>
</li>
</ul>
</li>
<li class="on1-3"><a href="">庄周</a>
<ul class="at at1">
<li class="pink pink5"><a href="">辅助</a>
<ul>
<li><a href="">极影</a></li>
<li><a href="">忍足</a></li>
<li><a href="">极寒</a></li>
<li><a href="">救赎</a></li>
<li><a href="">反甲</a></li>
<li><a href="">魔女</a></li>
</ul>
</li>
<li class="pink pink6"><a href="">坦克</a>
<ul>
<li><a href="">忍足</a></li>
<li><a href="">红莲</a></li>
<li><a href="">痛苦</a></li>
<li><a href="">弑神</a></li>
<li><a href="">不详</a></li>
<li><a href="">魔女</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="s2"><a href="">长安</a>
<ul class="on2">
<li><a href="">花木兰</a></li>
<li><a href="">凯</a></li>
<li><a href="">盾山</a></li>
</ul>
</li>
<li class="s3"><a href="">魔种</a>
<ul class="on3">
<li><a href="">吕布</a></li>
<li><a href="">嬴政</a></li>
<li><a href="">白起</a></li>
</ul>
</li>
<li class="s4"><a href="">七蜀</a>
<ul class="on4">
<li><a href="">刘备</a></li>
<li><a href="">阿斗</a></li>
<li><a href="">黄忠</a></li>
</ul>
</li>
<li class="s5"><a href="">大日</a>
<ul class="on5">
<li><a href="">后裔</a></li>
<li><a href="">嫦娥</a></li>
<li><a href="">猪八戒</a></li>
</ul>
</li>
<li class="s6"><a href="">寒流</a>
<ul class="on6">
<li><a href="">干将莫邪</a></li>
<li><a href="">王昭君</a></li>
<li><a href="">甄姬</a></li>
</ul>
</li>
</ul>
</body>
</html>
1634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
