js制作的横向二级导航，当用户的鼠标经过主菜单时立即二级弹出，可根据自己的需求来自定义菜单数目。
<!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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js制作横向鼠标感应弹出二级导航菜单效果_武鸣人</title>
<style>
body {
text-align: center;
background: #FFF;
font: 12px Tahoma, sans-serif;
color: #000;
}
img {
border: 0;
}
ul,li {
list-style:none;
}
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
margin: 0 auto;
display: block;
font: 0/0 sans-serif;
height: 3px;
}
.head {
margin: 0 auto;
width: 760px;
}
.header_wuming {
width: 750px;
float: right;
padding: 8px 0 0 0;
}
.headt {
padding-top: 8px;
font-size: 14px;
}
.head li {
display: inline;
}
.head li a {
background: #E9F2FF;
border: 1px solid #CCC;
padding: 2px 15px;
}
.head li a:hover {
background: #B3D3FF;
text-decoration: none;
color: #D30102;
}
</style>
</head>
<body>
<script type="text/javascript">
function fetch_object(idname)
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var my_obj = document.getElementById(idname);
return my_obj;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function toggle_nav(obj)
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
for (i = 1; i<= 9; i++ )
{
var sub_nav = fetch_object("wuming_nav" + i);
var sub_nav_index = fetch_object("wuming_nav0");
sub_nav_index.style.display = "none";
if (obj == i)
{
sub_nav.style.display = "block";
}
else
{
sub_nav.style.display = "none";
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="head">
<div class="header_wuming">
<ul>
<li onmouseover="javascript:toggle_nav(1)"><a href="https://www.wuming.ren">首页</a></li>
<li onmouseover="javascript:toggle_nav(2)"><a href="https://www.wuming.ren">武鸣一号</a></li>
<li onmouseover="javascript:toggle_nav(3)"><a href="https://www.wuming.ren">武鸣二号</a></li>
<li onmouseover="javascript:toggle_nav(4)"><a href="https://www.wuming.ren">武鸣三号</a></li>
<li onmouseover="javascript:toggle_nav(5)"><a href="https://www.wuming.ren">武鸣四号</a></li>
<li onmouseover="javascript:toggle_nav(6)"><a href="https://www.wuming.ren">武鸣五号</a></li>
<li onmouseover="javascript:toggle_nav(7)"><a href="https://www.wuming.ren">武鸣六号</a></li>
<li onmouseover="javascript:toggle_nav(8)"><a href="https://www.wuming.ren">武鸣七号</a></li>
<li onmouseover="javascript:toggle_nav(9)"><a href="https://www.wuming.ren">武鸣八号</a></li>
</ul>
<div class="clear"></div>
<div id="wuming_nav0" class="headt" style="display:block">武鸣人提示您：把鼠标放到主菜单上</div>
<div id="wuming_nav1" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效首页</a> | <a href="https://www.wuming.ren">首页一号</a> | <a href="https://www.wuming.ren">首页二号</a> | <a href="https://www.wuming.ren">首页三号</a>
</div>
<div id="wuming_nav2" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效一号</a> | <a href="https://www.wuming.ren">一号菜单栏目1</a> | <a href="https://www.wuming.ren">一号菜单栏目2</a> | <a href="https://www.wuming.ren">一号菜单栏目3</a>
</div>
<div id="wuming_nav3" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效二号</a> | <a href="https://www.wuming.ren">二号菜单栏目1</a> | <a href="https://www.wuming.ren">二号菜单栏目2</a>
</div>
<div id="wuming_nav4" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效三号</a> | <a href="https://www.wuming.ren">三号菜单栏目1</a>
</div>
<div id="wuming_nav5" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效四号</a> | <a href="https://www.wuming.ren">四号菜单栏目1</a> | <a href="https://www.wuming.ren">四号菜单栏目2</a> | <a href="https://www.wuming.ren">四号菜单栏目3</a>
</div>
<div id="wuming_nav6" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效五号</a> | <a href="https://www.wuming.ren">五号菜单栏目1</a> | <a href="https://www.wuming.ren">五号菜单栏目2</a> | <a href="https://www.wuming.ren">五号菜单栏目3</a> | <a href="https://www.wuming.ren">五号菜单栏目4</a> | <a href="https://www.wuming.ren">五号菜单栏目5</a> | <a href="https://www.wuming.ren">五号菜单栏目6</a>
</div>
<div id="wuming_nav7" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效六号</a> | <a href="https://www.wuming.ren">六号菜单栏目1</a> | <a href="https://www.wuming.ren">六号菜单栏目2</a> | <a href="https://www.wuming.ren">六号菜单栏目3</a>
</div>
<div id="wuming_nav8" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效七号</a> | <a href="https://www.wuming.ren">七号菜单栏目1</a> | <a href="https://www.wuming.ren">七号菜单栏目2</a> | <a href="https://www.wuming.ren">七号菜单栏目3</a>
</div>
<div id="wuming_nav9" class="headt" style="display:none">
<a href="https://www.wuming.ren">武鸣特效八号</a> | <a href="https://www.wuming.ren">八号菜单栏目1</a>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>本文来自武鸣人网站，转载请注明出处