jquery 二级导航 兼容ie6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery Simple Drop Down Menu v0.25</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
/* common page styles */
body
{ background: #6595A3;
padding: 0 20px}
.clear
{ clear: both;
overflow: hidden;
height: 0}
#all
{ width: 80%;
min-width: 650px;
margin: 40px auto 0 auto;
background: #FCFFED;
padding: 20px 35px}
h1
{ font: 26px tahoma, arial;
color: #324143}
p
{ font: 12px tahoma, arial;
color: #171F26;
margin-bottom: 25px}
a
{ color: #324143}
#copyright
{ width: 80%;
min-width: 650px;
margin: 0 auto;
padding: 20px 35px;
background: #B6C28B;
font: 12px tahoma, arial;
color: #324143}
#copyright a
{ color: #324143}
#copyright a:hover
{ color: #171F26}
</style>
</head>
<body>
<div id="all">
<h1>jQuery Simple Drop Down Menu v0.25</h1>
<p>Single-level Drop Down Menu based on jQuery library. See the source.</p>
<p><b>See also:</b><br>
<a href="http://javascript-array.com/scripts/multi_level_drop_down_menu/?jsddm">Multi-Level Drop-Down Menu</a><br>
<a href="http://javascript-array.com/scripts/simple_drop_down_menu/?jsddm">Single-Level Menu without jQuery</p>
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#jsddm li a
{ display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}
#jsddm li a:hover
{ background: #24313C}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}
#jsddm li ul li
{ float: none;
display: inline}
#jsddm li ul li a
{ width: auto;
background: #A9C251;
color: #24313C}
#jsddm li ul li a:hover
{ background: #8EA344}
</style>
<!--
Time, time, take us back before the line was drawn
Before the sky turned black. -->
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Help</a></li>
</ul>
<div class="clear"> </div>
<br>
<p>
<b>Compatibility:</b> IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+<br>
<b>Requirements:</b> jQuery library<br>
<b>Size:</b> < 1Kb;<br>
<b>Features:</b>
<ul style="font: 12px tahoma, arial; margin:-15px 10px 15px 35px;padding-top:0">
<li>unordered list as menu structure</li>
<li>absence of mouse events within html</li>
<li>timeout effect</li>
</ul>
<p><b>License:</b> Free, but please put a link to <a href="http://javascript-array.com/scripts/jquery_simple_drop_down_menu/">jsddm home page</a> where you want.</p>
</p>
</div>
<div id="copyright">© 2008 <a href="http://Javascript-Array.com/">Javascript-Array.com</div></div>
</body>
</html>