jquery hover()
<!DOCTYPE htm>
<html lang=en>
<meta charset='utf-8'/>
<head>
<style type="text/css">
.small_nav a { display: block; height: 50px; width: 100px; background: red;}
.small_nav div { width: 300px; height: 300px; background: #eee; display: none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.small_nav a').hover(
function () {
$('.submenu').show(1000);
},function(){
$('.submenu').hide(1000);
}
);
});
</script>
</head>
<body>
<div class="small_nav">
<a href="#" ></a>
<div class="submenu">
<ul>
<li><a href="#">as</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE htm>这样试试
<html lang=en>
<meta charset='utf-8'/>
<head>
<style type="text/css">
.small_nav a { display: block; height: 50px; width: 100px; background: red;}
.small_nav div { width: 300px; height: 300px; background: #eee; display: none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.small_nav a').mouseenter(
function({$('.submenu').show(1000);})
).mouseleave(function({$('.submenu').hide(1000);})
);
});
</script>
</head>
<body>
<div class="small_nav">
<a href="#" ></a>
<div class="submenu">
<ul>
<li><a href="#">as</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
<li><a href="#">sa</a></li>
</ul>
</div>
</div>
</body>
</html>
