<!DOCTYPE html>href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>寬屏通欄下(xià)拉菜單導航</title>
<style>
html,body,div,ul,li{ margin:0;padding:0; }
ul,li{ list-style:none; }
a{ color:#119f0f; text-decoration:none;}
header{ height:100px; border-bottom:1px solid #119f0f; box-sizing: border-box; position:relative; z-index:9999; }
.wrap{ width: 1200px;margin: 0 auto; }
#nav { display: flex;display: flex;flex-direction: row;justify-content: center;align-items: center;flex-wrap: wrap; }
ul.nav { display: inline-flex;flex: 1;padding-left:50px; }
li.nav-item { flex: 1;}
li.nav-item>a{ display: block;text-align: center;line-height: 100px;font-size: 16px;position: relative;}
li.nav-item>a::before{ display: none; content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-width: 0 10px 10px; border-style: solid; border-color: transparent transparent #119f0f; position: absolute; }
li.nav-item:hover>a ,li.nav-item.active>a{ color: #119f0f; }
li.nav-item:hover>a::before,li.nav-item.active>a::before{ display: block; }
/* 二級菜單 */
.subMenu{ display: none;position: absolute;top: 100px;left: 0;width: 100%; height: 100px;background-color: #119f0f; }
.subMenu>ul{ display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center; }
.subMenu>ul>li>a{ display:block;padding:0 18px;text-align: center;line-height: 50px;color: #fff; }
.subMenu>ul>li>a:hover{ color:red; }
</style>
</head>
<body>
<header>
<div class="wrap">
<nav id="nav">
<ul class="nav">
<li class="nav-item active"><a href="#">首頁</a></li>
<li class="nav-item"><a href="#">公司簡介</a>
<div class="subMenu">
<ul class="wrap">
<li><a href="#">公司簡介1</a></li>
<li><a href="#">公司簡介2</a></li>
<li><a href="#">公司簡介3</a></li>
</ul>
</div>
</li>
<li class="nav-item"> <a href="#">産品中(zhōng)心</a>
<div class="subMenu">
<ul class="wrap">
<li><a href="#">産品分(fēn)類1</a></li>
<li><a href="#">産品分(fēn)類2</a></li>
<li><a href="#">産品分(fēn)類3</a></li>
</ul>
</div>
</li>
<li class="nav-item"> <a href="#">案例中(zhōng)心</a>
<div class="subMenu">
<ul class="wrap">
<li><a href="#">案例分(fēn)類1</a></li>
<li><a href="#">案例分(fēn)類2</a></li>
<li><a href="#">案例分(fēn)類3</a></li>
</ul>
</div>
</li>
<li class="nav-item"><a href="#">新聞資(zī)訊</a></li>
<li class="nav-item"><a href="#">聯系方式</a></li>
</ul>
</nav>
</div>
</header>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('ul.nav li.nav-item').hover(function(){
$(this).children('div.subMenu').stop().slideToggle(600);
})
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>寬屏通欄下(xià)拉菜單導航</title>
<style>
html,body,div,ul,li{ margin:0;padding:0; }
ul,li{ list-style:none; }
a{ color:#119f0f; text-decoration:none;}
header{ height:100px; border-bottom:1px solid #119f0f; box-sizing: border-box; position:relative; z-index:9999; }
.wrap{ width: 1200px;margin: 0 auto; }
#nav { display: flex;display: flex;flex-direction: row;justify-content: center;align-items: center;flex-wrap: wrap; }
ul.nav { display: inline-flex;flex: 1;padding-left:50px; }
li.nav-item { flex: 1;}
li.nav-item>a{ display: block;text-align: center;line-height: 100px;font-size: 16px;position: relative;}
li.nav-item>a::before{ display: none; content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-width: 0 10px 10px; border-style: solid; border-color: transparent transparent #119f0f; position: absolute; }
li.nav-item:hover>a ,li.nav-item.active>a{ color: #119f0f; }
li.nav-item:hover>a::before,li.nav-item.active>a::before{ display: block; }
/* 二級菜單 */
.subMenu{ display: none;position: absolute;top: 100px;left: 0;width: 100%; height: 100px;background-color: #119f0f; }
.subMenu>ul{ display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center; }
.subMenu>ul>li>a{ display:block;padding:0 18px;text-align: center;line-height: 50px;color: #fff; }
.subMenu>ul>li>a:hover{ color:red; }
</style>
</head>
<body>
<header>
<div class="wrap">
<nav id="nav">
<ul class="nav">
<li class="nav-item active"><a href="#">首頁</a></li>
<li class="nav-item"><a href="#">公司簡介</a>
<div class="subMenu">
<ul class="wrap">
<li><a href="#">公司簡介1</a></li>
<li><a href="#">公司簡介2</a></li>
<li><a href="#">公司簡介3</a></li>
</ul>
</div>
</li>
<li class="nav-item"> <a href="#">産品中(zhōng)心</a>
<div class="subMenu">
<ul class="wrap">
<li><a href="#">産品分(fēn)類1</a></li>
<li><a href="#">産品分(fēn)類2</a></li>
<li><a href="#">産品分(fēn)類3</a></li>
</ul>
</div>
</li>
<li class="nav-item"> <a href="#">案例中(zhōng)心</a>
<div class="subMenu">
<ul class="wrap">
<li><a href="#">案例分(fēn)類1</a></li>
<li><a href="#">案例分(fēn)類2</a></li>
<li><a href="#">案例分(fēn)類3</a></li>
</ul>
</div>
</li>
<li class="nav-item"><a href="#">新聞資(zī)訊</a></li>
<li class="nav-item"><a href="#">聯系方式</a></li>
</ul>
</nav>
</div>
</header>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('ul.nav li.nav-item').hover(function(){
$(this).children('div.subMenu').stop().slideToggle(600);
})
})
</script>
</body>
</html>
475003427