<!DOCTYPE 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>宽屏通栏下拉菜单导航</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="#">产品中心</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="#">案例中心</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="#">新闻资讯</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>宽屏通栏下拉菜单导航</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="#">产品中心</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="#">案例中心</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="#">新闻资讯</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