<!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" />
<link
rel="stylesheet" type="text/css" href="./css/stylesheet.css" />
<script
type="text/javascript"
src="./jquery/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$(‘li.mainlevel‘).mousemove(function(){
$(this).find(‘ul‘).removeClass(‘linHideStyle‘).slideDown();//you can give it a
speed
});
$(‘li.mainlevel‘).mouseleave(function(){
$(this).find(‘ul‘).addClass(‘linHideStyle‘).slideUp("fast");
});
});
</script>
<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br
/><br /><br />
<div id="menu">
<ul id="nav">
<li
id="mainlevel_01" class="mainlevel">
<a href="#">第一</a>
<ul
class="linHideStyle">
<li>
<a href="">the
one</a>
</li>
<li>
<a
href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
<li
id="mainlevel_02" class="mainlevel">
<a href="#">第二</a>
<ul
class="linHideStyle">
<li>
<a href="">the
one</a>
</li>
<li>
<a
href="">3333dd</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
<li
id="mainlevel_03" class="mainlevel">
<a href="#">第三</a>
<ul
class="linHideStyle">
<li>
<a href="">the
one</a>
</li>
<li>
<a
href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
<li
id="mainlevel_04" class="mainlevel">
<a href="#">第四季度</a>
<ul
class="linHideStyle">
<li>
<a href="">the
one</a>
</li>
<li>
<a
href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>