<!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" />
<title>js鼠标滑过展开下拉菜单 - 网页模板</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#fff;}
/*导航菜单*/
#nav{width:950px;margin:20px auto;height:40px;line-height:40px;background:url('images/nav-bg.png');display:block;overflow:hidden;}
#navMenu ul{width:950px;float:left;height:40px;}
#navMenu li{float:left;font-size:14px;}
#navMenu li a{color:#fff!important;text-decoration:none;width:91px;height:40px;line-height:40px;text-align:center;background-image:url('images/navbg.png');display:block;}
#navMenu li a.last{width:92px;}
#navMenu li a.current{background-position:0 -80px;width:91px;height:40px;line-height:40px;text-align:center;display:block;color:#fff;}
#navMenu li a:hover{background-position:0 -40px;}
/*-------- 下拉菜单 --------------*/
.dropMenu{position:absolute;top:0;z-index:100;visibility:hidden;margin-top:-2px;border:1px solid #0e2c5e;border-top:0;background-color:#cbdef4;padding:4px;width:260px;}
.dropMenu li{float:left;width:130px;height:32px;}
.dropMenu li a{display:block;padding:5px 0 5px 12px;color:#0f335d;}
.dropMenu a:hover{text-decoration:underline;color:#000;}
</style>
<div id="nav">
<ul id="navMenu">
<li><a href="http://www.moobnn.com/">首页</a></li>
<li><a href="http://www.moobnn.com/" rel='dropmenu1'>jquery 特效</a></li>
<li><a href="http://www.moobnn.com/" rel='dropmenu2'>js特效</a></li>
<li><a class="current" href="http://www.moobnn.com/" rel='dropmenu3'>flash特效</a></li>
<li><a href="http://www.moobnn.com/" rel='dropmenu4'>div+css教程</a></li>
<li><a class="last" href="http://www.moobnn.com/" rel='dropmenu5'>html5教程</a></li>
</ul>
</div>
<script type='text/javascript' src='js/dropdown.js'></script>
<ul id="dropmenu1" class="dropMenu">
<li><a href="http://www.moobnn.com/">jquery图片特效</a></li>
<li><a href="http://www.moobnn.com/">jquery导航菜单</a></li>
<li><a href="http://www.moobnn.com/">jquery选项卡特效</a></li>
<li><a href="http://www.moobnn.com/">jquery文字特效</a></li>
<li><a href="http://www.moobnn.com/">jquery表单特效</a></li>
<li><a href="http://www.moobnn.com/">jquery表格特效</a></li>
</ul>
<ul id="dropmenu2" class="dropMenu">
<li><a href="http://www.moobnn.com/">js图片特效</a></li>
<li><a href="http://www.moobnn.com/">js导航菜单</a></li>
<li><a href="http://www.moobnn.com/">js选项卡特效</a></li>
<li><a href="http://www.moobnn.com/">js文字特效</a></li>
<li><a href="http://www.moobnn.com/">js表单特效</a></li>
<li><a href="http://www.moobnn.com/">js表格特效</a></li>
</ul>
<ul id="dropmenu3" class="dropMenu">
<li><a href="http://www.moobnn.com/">flash图片特效</a></li>
<li><a href="http://www.moobnn.com/">flash导航菜单</a></li>
<li><a href="http://www.moobnn.com/">flash文字特效</a></li>
</ul>
<ul id="dropmenu4" class="dropMenu">
<li><a href="http://www.moobnn.com/">div+css布局</a></li>
<li><a href="http://www.moobnn.com/">div+css菜单</a></li>
<li><a href="http://www.moobnn.com/">css3教程</a></li>
</ul>
<ul id="dropmenu5" class="dropMenu">
<li><a href="http://www.moobnn.com/">html5特效</a></li>
<li><a href="http://www.moobnn.com/">html5图表</a></li>
</ul>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>