小控件——下拉菜单的显示与隐藏

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'
        })
    }