juqery写了个弹出弹不出来慢慢显示

u010423262 2013-04-23 04:07:00

<!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>

ul,li

{

	list-style:none; padding:0px; margin:0px;

}

.menu1

{

	width:1045px; height:67px;

}

.menu1 ul li

{

	width:94px; height:65px; background:url(http://img02.taobaocdn.com/imgextra/i2/723902727/T2moHRXcRXXXXXXXXX_!!723902727.jpg); float:left; text-align:center; line-height:65px; font-size:14px; font-family:微软雅黑; position:relative; 

}

.menu1 ul li a

{

	color:#bfbfbf; text-decoration:none;

}

.menu1 ul li:hover

{

	background:url(http://img01.taobaocdn.com/imgextra/i1/723902727/T2RMXXXX0PXXXXXXXX_!!723902727.jpg);

}

.tanchu

{

	width:160px; height:auto; overflow:hidden; position:absolute; left:-35px; top:70px;

}

.tanchu .dingshang

{

	width:160px; height:13px; background:url(http://img03.taobaocdn.com/imgextra/i3/723902727/T2pvTGXn8aXXXXXXXX_!!723902727.gif) no-repeat; font-size:0px;

}

.tanchu ul

{

	background:url(http://img01.taobaocdn.com/imgextra/i1/723902727/T2fY_RXbxaXXXXXXXX_!!723902727.gif);

}

.tanchu ul a

{

 background: url(http://img03.taobaocdn.com/imgextra/i3/723902727/T2JR6RXf0XXXXXXXXX_!!723902727.gif) no-repeat scroll center bottom transparent;

    color: #FFFFFF;

    display: block;

    height: 34px;

    line-height: 34px;



    overflow: hidden;



    text-align: left;

    width: 160px;

	font-size:12px;

}

.tanchu ul a span

{

	margin-left:20px;

}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $('.menu1 ul li').hover(function(){

    $(this).children(".tanchu").slideDown();

  },function(){

    $(this).children(".tanchu").slideUp();

  });

});

</script>

<title>无标题文档</title>

</head>



<body>

<div class="menu1">

<ul>

<li><a target="_blank" href="#">文字1</a></li>



<li><a target="_blank" href="#">文字2</a><div  class="tanchu">

 <div style="display:none;" class="dingshang"></div>

 <ul>



 <a href="#"><span>1</span></a>

 <a href="#"><span>2</span></a>

 <a href="#"><span>3</span></a>

 <a href="#"><span>3</span></a> 



 </ul>

 </div></li>



<li><a target="_blank" href="#">文字3</a></li>

<li><a target="_blank" href="#">文字4</a><div  class="tanchu">

 <div style="display:none;" class="dingshang"></div>

 <ul>



 <a href="#"><span>1</span></a>

 <a href="#"><span>2</span></a>

 <a href="#"><span>3</span></a>

 <a href="#"><span>3</span></a> 



 </ul>

 </div></li>



</ul>



</div>



</body>

</html>