效果图
html代码
<div class="head-nav" style="margin-bottom: 1px; ">
<div class="head-nav-con clearFloat">
<ul>
<li class="drop-down" style="border-bottom: 3px solid #007AFF;"><a href="index.html" style="color: #007AFF;">首页</a>
<ul class="drop-down-content">
<li><a href="active.html">动态</a></li>
<li><a href="#">故事</a></li>
<li class="drop-down-2"><a href="#">人物</a>
</li>
</ul>
</li>
<li class="drop-down" ><a href="#" >组织机构</a></li>
<li class="drop-down" ><a href="#" >文件制度</a>
<ul class="drop-down-content">
<li><a href="#">通知公告</a></li>
</ul>
</li>
<li class="drop-down" ><a href="#" >工作动态</a></li>
<li class="drop-down" ><a href="#" >榜样引领</a>
<ul class="drop-down-content-2">
<li><a href="#">师德风采</a></li>
</ul>
</li>
<li class="drop-down" ><a href="#" >师德故事</a></li>
<li class="drop-down" ><a href="#" >他山之石</a></li>
<li class="drop-down"><a href="#">在线学习</a>
<ul class="drop-down-content">
<li><a href="#">学习资料</a></li>
<li><a href="#">师德讲堂</a></li>
</ul>
</li>
<li class="drop-down" ><a href="#" >师德监督</a></li>
</ul>
</div>
</div>
css样式
*bar*/
ol,
ul,
li {
list-style: none;
}
.head-nav {
width: 100%;
height: 60px;
background: white;
}
.head-nav-con {
width: 100%;
height: 60px;
margin: auto;
}
.head-nav-con ul li {
width: 11%;
float: left;
font-size: 18px;
text-align: center;
}
.head-nav-con ul li a {
color: #000000;
font-size: 18px;
font-family: SourceHanSansSC-regular;
}
.head-nav-con ul li a:hover {
color: #007AFF;
}
.head-nav-con ul a {
display: block;
text-decoration: none;
text-align: center;
line-height: 60px;
color: white;
}
.head-nav-con .drop-down {
position: relative;
}
.head-nav-con .drop-down-content {
padding: 0;
display: none;
position: absolute;
z-index: 2;
background: rgba(34,34,34,0.8);
}
.head-nav-con .drop-down-content li {
width:100% ;
}
.head-nav-con .drop-down-content li a{
color: white;
}
.head-nav-con .drop-down-content li:hover > a {
background-color:#007AFF;
color: white;
}
.head-nav-con .drop-down:hover .drop-down-content {
display: block;
width: 100%;
}
.head-nav-con .drop-down-2 {
position: relative;
}
.head-nav-con .drop-down-content-2 {
padding: 0;
display: none;
position: absolute;
z-index: 1;
background-color: rgba(34,34,34,0.8);
right: -170px;
top: 0;
}
.head-nav-con .drop-down-content-2 > li {
float: none;
background-color: rgba(34,34,34,0.8);
}
.head-nav-con .drop-down-content-2 li:hover a {
background-color: #007AFF;
}
.head-nav-con .drop-down-2:hover .drop-down-content-2 {
display: block;
}
mui