网站hover导航二级菜单

核心代码：

nav .link .ul1 { //隐藏的
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  top: 60px;
  z-index: 9;
}


nav .link:hover .ul1 { //显示
  display: block;
  color: #c10d21;
}

hover很聪明，会直接显示当前菜单下的二级下拉菜单而不是，所有class="ul1" 的二级菜单
 <div class="link">
      <a href="">新一代信息技术</a>
         <ul class="ul1">
             <li><a href="">人工智能</a></li>
             <li><a href="">5G</a></li>
             <li><a href="">区块链</a></li>
        </ul>
</div>

 

<style>
header {
  width: 100%;
  height: 60px;
  margin: auto;
  background: #4b94f2;
}
header .nav {
  width: 1150px;
  padding: 0 25px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
header .nav li {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}
header .nav li:hover .nav_son {
  display: block;
}
header .nav li .link {
  color: #fff;
  font-size: 16px;
  padding: 20px 35px;
  display: block;
}
header .nav li .link .icon_more {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  /*5px 足够了*/
  border-top-color: #fff;
  /*top箭头向下 bottom箭头向上*/
  margin-left: 5px;
}
header .nav li .link:hover {
  background: #1a70b9;
}
header .nav li .nav_son {
  position: absolute;
  top: 60px;
  width: 100%;
  background: #fff;
  display: none;
}
header .nav li .nav_son .son_a {
  font-size: 14px;
  padding: 15px 35px;
  display: block;
  color: #333333;
}
header .nav li .nav_son .son_a:hover {
  color: #1f81ff;
}
</style>

<header>
        <ul class="nav">
            <li>
                <a href="" class="link">首页</a>
            </li>
            <li>
                <a href="" class="link">政策法规</a>
            </li>
            <li>
                <a href="" class="link">新闻中心</a>
            </li>
            <li>
                <a href="" class="link">技术市场 <span class="icon_more"></span> </a>
                <div class="nav_son">
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                </div>
            </li>
            <li>
                <a href="" class="link">科技人才<span class="icon_more"></span> </a>
                <div class="nav_son">
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                </div>
            </li>
            <li>
                <a href="" class="link">科技金融<span class="icon_more"></span></a>
                <div class="nav_son">
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                </div>
            </li>
            <li>
                <a href="" class="link">高企展示<span class="icon_more"></span></a>
                <div class="nav_son">
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                    <a href="" class="son_a">我是二级</a>
                </div>
            </li>
        </ul>
    </header>