宽屏通栏下拉菜单导航

发布时间:2020年06月19日      浏览次数:10 次
<!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>
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!