*nav的隐藏显示

HTML：

            <div class="nav-center">
                <ul>
                    <li><a href="###">AAA</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                    <li><a href="###">BBB</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div> 
                    </li>
                    <li><a href="###">CCC</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div> 
                    </li>
                    <li><a href="###">DDD</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                    <li class="end_li"><a href="###">EEE</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                </ul>
            </div>



CSS：

*{
    margin:0;
    padding:0;
}

.nav-center{
    margin-top: 30px;
    margin-left: 250px;
}
.nav-center ul{

    list-style-type:none;/*清除项目符号*/
}
.nav-center ul li{
    text-align: center;/*文字居中对齐*/
    width: 115px;/*宽度*/
    height: 17px;/*高度*/
    border-right:1px solid #d8d8d8;/*右边框*/
    float: left;/*左浮动*/
    line-height: 17px;/*行高*/
    position: relative;/*相对定位*/
}
.nav-center ul li a{
    text-decoration: none;/*清除下划线*/
    font-size: 14px;/*字体样式*/
    color: #646464;/*字体颜色*/
}
.nav-center ul li a:hover{
    color:#0b7bc9;
}
.nav-center ul li a:hover + .nav_son > .ul_son{
  visibility: visible;/*关键的一步  visibility属性规定元素是否可见，可选值：visible可见，默认； hidden不可见； collapse这个我知道如何详细说明，但它的特点是占空间，和display：none不占空间。*/
   left: -100px;/*触发后向左平移100px*/
}
.nav-center .end_li{
   border:none; /*清除边框*/
}

.nav-center .nav_son .ul_son{
    transition-duration:0.5s;/*过渡所需时间*/
    visibility: hidden;/*元素不可见*/
    margin:0;
    width: 400px;
    height: 20px;
    background:blue;/*背景颜色*/
    border-radius: 15px;/*圆角*/
    position: absolute;/*绝对定位*/
    left:0px;
    top:20px;
}
.nav-center .nav_son .ul_son:hover{
   visibility: visible;/*元素可见*/
   left: -100px;/*这里与上面（.nav-center ul li a:hover + .nav_son > .ul_son）对应，目的是控制元素的位置*/
}
.nav-center .nav_son .ul_son li{
    width: 70px;
    height: 20px;
    line-height: 20px;
    border: none;
    float: left;
    margin-left:8px;
}
 .nav-center .nav_son .ul_son li a{
    color:white;
    text-align:center;
}
.nav-center .nav_son .ul_son li a:hover{
    color:red;
}

 效果见下期、、、

转载于:https://www.cnblogs.com/qq1193447294/p/5783584.html