<!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>导航栏目鼠标经过显示下拉子菜单效果</title>
<style>
body{ margin0; padding:0; background-color:#666;}
#header{ clear:both; width:100%; min-width:1900px; margin:0 auto; padding:0px; text-align:center; position:relative; }
#header_main{ clear:both; width:1900px; height:60px; margin:0px auto; padding:0px; background-color:#2F86FD; display:table;}
#nav{ width:610px; height:58px; line-height:58px; margin:0 auto; padding:0px; text-align:center; display:flex; flex-direction: row; justify-content:center; flex-wrap: wrap;}
ul.nav { list-style:none; display: inline-flex;flex: 1;padding-left:50px; }
li.nav-item { list-style:none; flex: 1;}
#nav a.off:link, #nav a.off:visited{ float:left; width:150px; text-align:center; color:#fff; font-size:20px; font-weight:bold; overflow:hidden; text-decoration:none; }
#nav a.off:hover{ color:#FFFF00; text-decoration:none;}
#nav a.on:link, #nav a.on:visited { float:left; width:150px; text-align:center; color:#FFFF00; font-size:20px; font-weight:bold; overflow:hidden; text-decoration:none; }
#nav a.on:hover{ color:#FFFF00; text-decoration:none;}
.nav_line{ float:left; width:1px; height:20px; margin-top:19px; background-color:#fff; }
.subMenu{ display:none; position:absolute; top:70px; left:0; width:100%; height:300px; background-color:#fff; border-bottom:1px #ddd solid; z-index:100000; }
.wrap{ clear:both; width:1190px; margin:0 auto; padding:30px 0; }
.wrap_left{ float:left; width:120px; text-align:center;}
.wrap_left_txt{ font-size:24px; color:#375F9A;}
.wrap_left_img{ margin-top:5px;}
.wrap_line{ float:left; width:1px; height:100px; margin:0 50px; margin-top:10px; border-left:1px #ddd solid;}
.wrap_nav{ float:left; width:50%; text-align:left;}
.wrap_nav a:link, .wrap_nav a:visited { clear:both; line-height:40px; color:#666; text-decoration:none; display:block; }
.wrap_nav a:hover{ color:#375F9A; text-decoration:none;}
.wrap_right{ float:right;}
</style>
<script>var Active_Nav_Id = "nav_index";</script>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="web_main">
<!-- Header -->
<div id="header">
<div id="header_main">
<div id="nav">
<ul class="nav">
<li class="nav-item">
<a href="#" id="nav_index" class="off" >网站首页</a>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="#" id="nav_news" class="off" >有子菜单1</a>
<div class="subMenu">
<div class="wrap">
<div class="wrap_left">
<div class="wrap_left_txt">菜单标题1</div>
<div class="wrap_left_img"><img src="" width="50" height="50" border="1" alt="图片" /></div>
</div>
<div class="wrap_line"></div>
<div class="wrap_nav">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
<a href="#">子菜单三</a>
<a href="#">子菜单四</a>
</div>
<div class="wrap_right"><img src="" width="330" height="138" border="1" alt="图片" /></div>
</div>
</div>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="#" id="nav_shop" class="off" >有子菜单2</a>
<div class="subMenu">
<div class="wrap">
<div class="wrap_left">
<div class="wrap_left_txt">菜单标题2</div>
<div class="wrap_left_img"><img src="" width="50" height="50" border="1" alt="图片" /></div>
</div>
<div class="wrap_line"></div>
<div class="wrap_nav">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
<a href="#">子菜单三</a>
<a href="#">子菜单四</a>
</div>
<div class="wrap_right"><img src="" width="330" height="138" border="1" alt="图片" /></div>
</div>
</div>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="#" id="nav_data" class="off" >无子菜单</a>
</li>
</ul>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
if ( typeof(Active_Nav_Id) != "undefined" && Active_Nav_Id != "" ){
document.getElementById(Active_Nav_Id).className = "on";
}
</script>
<script>
$(function(){
$('ul.nav li.nav-item').hover(function(){
$(this).children('div.subMenu').stop().slideToggle(600);
})
})
</script>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏目鼠标经过显示下拉子菜单效果</title>
<style>
body{ margin0; padding:0; background-color:#666;}
#header{ clear:both; width:100%; min-width:1900px; margin:0 auto; padding:0px; text-align:center; position:relative; }
#header_main{ clear:both; width:1900px; height:60px; margin:0px auto; padding:0px; background-color:#2F86FD; display:table;}
#nav{ width:610px; height:58px; line-height:58px; margin:0 auto; padding:0px; text-align:center; display:flex; flex-direction: row; justify-content:center; flex-wrap: wrap;}
ul.nav { list-style:none; display: inline-flex;flex: 1;padding-left:50px; }
li.nav-item { list-style:none; flex: 1;}
#nav a.off:link, #nav a.off:visited{ float:left; width:150px; text-align:center; color:#fff; font-size:20px; font-weight:bold; overflow:hidden; text-decoration:none; }
#nav a.off:hover{ color:#FFFF00; text-decoration:none;}
#nav a.on:link, #nav a.on:visited { float:left; width:150px; text-align:center; color:#FFFF00; font-size:20px; font-weight:bold; overflow:hidden; text-decoration:none; }
#nav a.on:hover{ color:#FFFF00; text-decoration:none;}
.nav_line{ float:left; width:1px; height:20px; margin-top:19px; background-color:#fff; }
.subMenu{ display:none; position:absolute; top:70px; left:0; width:100%; height:300px; background-color:#fff; border-bottom:1px #ddd solid; z-index:100000; }
.wrap{ clear:both; width:1190px; margin:0 auto; padding:30px 0; }
.wrap_left{ float:left; width:120px; text-align:center;}
.wrap_left_txt{ font-size:24px; color:#375F9A;}
.wrap_left_img{ margin-top:5px;}
.wrap_line{ float:left; width:1px; height:100px; margin:0 50px; margin-top:10px; border-left:1px #ddd solid;}
.wrap_nav{ float:left; width:50%; text-align:left;}
.wrap_nav a:link, .wrap_nav a:visited { clear:both; line-height:40px; color:#666; text-decoration:none; display:block; }
.wrap_nav a:hover{ color:#375F9A; text-decoration:none;}
.wrap_right{ float:right;}
</style>
<script>var Active_Nav_Id = "nav_index";</script>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="web_main">
<!-- Header -->
<div id="header">
<div id="header_main">
<div id="nav">
<ul class="nav">
<li class="nav-item">
<a href="#" id="nav_index" class="off" >网站首页</a>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="#" id="nav_news" class="off" >有子菜单1</a>
<div class="subMenu">
<div class="wrap">
<div class="wrap_left">
<div class="wrap_left_txt">菜单标题1</div>
<div class="wrap_left_img"><img src="" width="50" height="50" border="1" alt="图片" /></div>
</div>
<div class="wrap_line"></div>
<div class="wrap_nav">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
<a href="#">子菜单三</a>
<a href="#">子菜单四</a>
</div>
<div class="wrap_right"><img src="" width="330" height="138" border="1" alt="图片" /></div>
</div>
</div>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="#" id="nav_shop" class="off" >有子菜单2</a>
<div class="subMenu">
<div class="wrap">
<div class="wrap_left">
<div class="wrap_left_txt">菜单标题2</div>
<div class="wrap_left_img"><img src="" width="50" height="50" border="1" alt="图片" /></div>
</div>
<div class="wrap_line"></div>
<div class="wrap_nav">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
<a href="#">子菜单三</a>
<a href="#">子菜单四</a>
</div>
<div class="wrap_right"><img src="" width="330" height="138" border="1" alt="图片" /></div>
</div>
</div>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="#" id="nav_data" class="off" >无子菜单</a>
</li>
</ul>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
if ( typeof(Active_Nav_Id) != "undefined" && Active_Nav_Id != "" ){
document.getElementById(Active_Nav_Id).className = "on";
}
</script>
<script>
$(function(){
$('ul.nav li.nav-item').hover(function(){
$(this).children('div.subMenu').stop().slideToggle(600);
})
})
</script>
</div>
</body>
</html>
475003427