html :
结构是ul里面包含着小li,li里面有链接a和下拉总菜单盒子.slideDown
css:
ul设置宽度采用flex布局,里面的li平分宽度
li里面的子元素a转化为行内块元素,设置宽度百分百,通过设置伪元素的方式设置css三角(不采用定位,采用padding,margin)控制位置
.slideDown采用定位的方式
<div class="nav-left">
<ul>
<li><a href="#one">小说简介</a>
<div class="slideDown">
<a href="#one-1">作者介绍</a>
<a href="#one-2">作品导读</a>
</div></li>
<li><a href="#two">动漫简介</a>
<div class="slideDown">
<a href="#two-1">动漫人物</a>
<a href="#two-2">动漫剧情</a>
</div></li>
<li><a href="#three">漫画简介</a>
<div class="slideDown">
<a href="#three">漫画导读</a>
</div></li>
<li><a href="#four">电视剧简介</a>
<div class="slideDown">
<a href="#four">演员阵容</a>
</div></li>
<li><a href="#five">留言评论</a>
</li>
</ul>
</div>
/* 2.1 .nav-left模块 */
.nav .nav-left {
float: left;
height: 40px;
width: 60%;
}
.nav .nav-left ul {
padding: 0 10px;
width: 100%;
display: flex;
}
.nav .nav-left ul li{
position: relative;
flex: 1
}
.nav .nav-left ul li>a {
/* 转化为行内块元素了,之间天然有间隙 */
display: inline-block;
height: 36px;
/* 没有设宽度,行内块元素默认的宽度是内容的宽度,所以text-align:center失效 */
width: 100%;
text-align: center;
line-height: 36px;
}
.nav-left li:nth-child(-n+4)>a::after {
content: '';
display: inline-block;
/* 第一种方法是通过定位的方式,但是a的字数不同时,通过定位的方式比较麻烦 */
/* 第二中方式是通过将a和a的伪元素都转化为行内块元素的方法,然后通过padding,margin等等控制 */
/* position: absolute;
top:15px;
left:86px; */
margin: 0 0 2px 2px;
width: 5px;
height: 5px;
transform: rotate(45deg);
border:2px solid #000;
border-color:transparent #cb99c5 #cb99c5 transparent;
}
/* 用c3实现三角的动画效果,在js里面选择伪元素比较困难 */
.nav-left li:nth-child(-n+4):hover a::after {
transform: translateY(5px ) rotate(225deg);
}
.nav .nav-left .slideDown {
/* 使用定位,防止被下面的内容盖住 */
position: absolute;
/* 设置宽度,因为定位的元素都属行内块元素 */
width: 100%;
top:36px;
left:-3px;
z-index: 999;
display: none;
}
.nav .nav-left .slideDown a {
display: block;
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
background-color:#cb99c5;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom:1px solid #ccc ;
}
/* 给下拉菜单添加的类 */
.nav-bgColor {
color: #000;
}
js代码:
var nav_lis = document.querySelectorAll('.nav .nav-left ul>li')
for (var i = 0; i < nav_lis.length; i++) {
// 鼠标移过,显示
nav_lis[i].addEventListener('mouseover', function () {
this.children[1].style.display = 'block'
})
// 鼠标移出,隐藏
nav_lis[i].addEventListener('mouseleave', function () {
this.children[0].className = ''
this.children[1].style.display = 'none'
})
}