<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<title>Document</title>
<style>
.box {
font-size: 14px;
list-style: none;
margin: 15px auto;
padding: 0px;
width: 1000px;
color: white;
}
.box li {
font-size: 14px;
float: left;
width: 200px;
height: 35px;
line-height: 35px;
text-align: center;
cursor: pointer;
background: #333;
}
.box li .pox {
list-style: none;
margin: 0px;
padding: 0px;
display: none;
color: red;
}
.box li .pox li{
background: blueviolet;
}
</style>
<script>
$(function(){
$('.box li').hover(function(){
$(this).find('.pox').slideDown('normal');
},function(){
$(this).find('.pox').stop().slideUp('normal');
});
})
</script>
</head>
<body>
<ul class="box">
<li>导航列表1
<ul class="pox">
<li> 导航列表11</li>
<li>导航列表11</li>
<li>导航列表11</li>
<li>导航列表11</li>
<li>导航列表11</li>
</ul>
</li>
<li>导航列表2
<ul class="pox">
<li>导航列表22</li>
<li>导航列表22</li>
<li>导航列表22</li>
<li>导航列表22</li>
<li>导航列表22</li>
</ul>
</li>
<li>导航列表3
<ul class="pox">
<li>导航列表33</li>
<li>导航列表33</li>
<li>导航列表33</li>
<li>导航列表33</li>
<li>导航列表33</li>
</ul>
</li>
<li>导航列表4
<ul class="pox">
<li>导航列表44</li>
<li>导航列表44</li>
<li>导航列表44</li>
<li>导航列表44</li>
<li>导航列表44</li>
</ul>
</li>
<li>导航列表5
<ul class="pox">
<li>导航列表55</li>
<li>导航列表55</li>
<li>导航列表55</li>
<li>导航列表55</li>
<li>导航列表55</li>
</ul>
</li>
</ul>
</body>
</html>
时间： 2024-11-08 18:27:40