level 2
丑不拉几东😂
楼主
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<style type="text/css">
*{
margin:0px;padding:0px;
font-family:微软雅黑;
}
body{
background:#feeded;
}
#umenu{
list-style: none;
}
.litem{
border:1px solid #ED9F9f;
width:200px;
}
.litem>a{
display:block;
padding-left: 10px;
height:30px;
background:#990020;
line-height:30px;
border-left:12px solid #711515;
}
.uitem li{
border:1px solid #ED9F9f;
}
.uitem a{
display:block;
padding-left: 10px;
height:30px;
background:#E85070;
line-height:30px;
border-left:35px solid #A71F1F;
}
a{
color:white;
text-decoration:none;
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<div id="all">
<ul id='umenu'>
<li class="litem"><a href="#">体育明星</a>
<ul class="uitem">
<li><a href="#">纳什</a></li>
<li><a href="#">乔丹</a></li>
<li><a href="#">科比</a></li>
</ul></li>
<li class="litem"><a href="#">政治明星</a>
<ul class="uitem">
<li><a href="#">某某</a></li>
<li><a href="#">某某</a></li>
<li><a href="#">某某马</a></li>
</ul></li>
<li class="litem"><a href="#">娱乐明星</a>
<ul class="uitem">
<li><a href="#">某某</a></li>
<li><a href="#">某某</a></li>
<li><a href="#">某某</a></li>
</ul>
</li>
<li class="litem"><a href="#">历史明星</a>
<ul class="uitem">
<li><a href="#">毛泽东</a></li>
<li><a href="#">康熙</a></li>
<li><a href="#">秦始皇</a></li>
</ul></li>
</ul>
</div>
<body>
<script>
var i=0;
$('.uitem').hide();
$('.litem>a').toggle(function(){
$(this).next().slideDown();
},
function(){
$(this).next().slideUp();
});
</script>
</html>
2018年08月03日 09点08分
1
<head>
<script src="jquery-3.3.1.js"></script>
<style type="text/css">
*{
margin:0px;padding:0px;
font-family:微软雅黑;
}
body{
background:#feeded;
}
#umenu{
list-style: none;
}
.litem{
border:1px solid #ED9F9f;
width:200px;
}
.litem>a{
display:block;
padding-left: 10px;
height:30px;
background:#990020;
line-height:30px;
border-left:12px solid #711515;
}
.uitem li{
border:1px solid #ED9F9f;
}
.uitem a{
display:block;
padding-left: 10px;
height:30px;
background:#E85070;
line-height:30px;
border-left:35px solid #A71F1F;
}
a{
color:white;
text-decoration:none;
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<div id="all">
<ul id='umenu'>
<li class="litem"><a href="#">体育明星</a>
<ul class="uitem">
<li><a href="#">纳什</a></li>
<li><a href="#">乔丹</a></li>
<li><a href="#">科比</a></li>
</ul></li>
<li class="litem"><a href="#">政治明星</a>
<ul class="uitem">
<li><a href="#">某某</a></li>
<li><a href="#">某某</a></li>
<li><a href="#">某某马</a></li>
</ul></li>
<li class="litem"><a href="#">娱乐明星</a>
<ul class="uitem">
<li><a href="#">某某</a></li>
<li><a href="#">某某</a></li>
<li><a href="#">某某</a></li>
</ul>
</li>
<li class="litem"><a href="#">历史明星</a>
<ul class="uitem">
<li><a href="#">毛泽东</a></li>
<li><a href="#">康熙</a></li>
<li><a href="#">秦始皇</a></li>
</ul></li>
</ul>
</div>
<body>
<script>
var i=0;
$('.uitem').hide();
$('.litem>a').toggle(function(){
$(this).next().slideDown();
},
function(){
$(this).next().slideUp();
});
</script>
</html>