如何使下拉菜单延长消失

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font:12px/normal Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
a img {
border:none;
}
#content {
width:800px;
margin:30px auto;
}
.main_nav {
width:100%;
height:30px;
}
.main_nav ul li {
float:left;
width:190px;
height:30px;
border-right:1px solid #666;
position:relative;
}
.main_nav ul li a {
display:block;
height:30px;
line-height:30px;
text-align:center;
background:#333;
color:#ccc;
text-decoration:none;
}
.main_nav ul li dl {
position:absolute;
left:0;
top:30px;
width:280px; background:#F00;
display:none;
}
.main_nav ul li dl dd {
height:31px; float:left; margin-right:10px; display:inline;
}
.main_nav ul li dl dd a {
display:block;
height:30px;
line-height:30px;
text-align:center;
color:white;
background:#555;
border-bottom:1px solid #666;
}
.main_nav ul li dl dd a:hover{background:#333;color:#ccc;}
.click {
margin-top:200px;
}
</style>
</head>
<body>
<div id="content">
  <div class="main_nav hover">
    <ul>
      <li><a href="http://www.niutuku.com">网页特效</a>
        <dl>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
        </dl>
      </li>
       <li><a href="http://www.niutuku.com">网页设计</a>
        <dl>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
    <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
        </dl>
      </li>
      <li><a href="javascript:http://www.niutuku.com" title="">网页制作</a>
        <dl>
           <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
        </dl>
      </li>
      <li><a href="javascript:" title="">网站优化</a>
        <dl>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
          <dd><a href="#">当当品</a></dd>
        </dl>
      </li>
    </ul>
  </div>

</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(".hover ul li").hover(function(){
$(this).children("dl").slideDown(300)
}, function(){
$(this).children("dl").slideUp(100)
});</script><div style=" height:200px;"></div>
</body>
</html>
<script type="text/javascript">
$(".hover ul li").hover(
function(){
$(this).children("dl").slideDown(300)
},
function(){
var obj=$(this);
setTimeout(function(){obj.children("dl").slideUp(100);},2000);
}
);
</script>