<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">src="static/picture/20170711122112.jpg"src="static/picture/20170711122112.jpg"src="static/picture/20170711122112.jpg"src="static/picture/20170711122112.jpg"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導航欄目鼠标經過顯示下(xià)拉子菜單效果</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="20170711122112.html" id="nav_index" class="off" >網站首頁</a>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="20170711122112.html" 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="20170711122112.html">子菜單一(yī)</a>
<a href="20170711122112.html">子菜單二</a>
<a href="20170711122112.html">子菜單三</a>
<a href="20170711122112.html">子菜單四</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="20170711122112.html" 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="20170711122112.html">子菜單一(yī)</a>
<a href="20170711122112.html">子菜單二</a>
<a href="20170711122112.html">子菜單三</a>
<a href="20170711122112.html">子菜單四</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="20170711122112.html" 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>導航欄目鼠标經過顯示下(xià)拉子菜單效果</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="20170711122112.html" id="nav_index" class="off" >網站首頁</a>
</li>
<span class="nav_line"></span>
<li class="nav-item">
<a href="20170711122112.html" 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="20170711122112.html">子菜單一(yī)</a>
<a href="20170711122112.html">子菜單二</a>
<a href="20170711122112.html">子菜單三</a>
<a href="20170711122112.html">子菜單四</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="20170711122112.html" 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="20170711122112.html">子菜單一(yī)</a>
<a href="20170711122112.html">子菜單二</a>
<a href="20170711122112.html">子菜單三</a>
<a href="20170711122112.html">子菜單四</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="20170711122112.html" 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