本文主要讲述CSS常用实例，如需HTML和CSS基础请到菜鸟教程自己补习。

方式一：

原理：设置导航栏高度，隐藏其超出部分
效果如图：

html代码：

<div class="box">
<ul>
    <li>this is 1</li>
    <li>this is 2</li>
    <li>this is 3</li>
    <li>this is 4</li>
    <li>this is 5</li>
</ul>
</div>

css代码：

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 200px;
    height: 50px;       /*导航条高度设置成50px*/
    margin: 40px;
    overflow: hidden;    /*超出导航条部分隐藏*/
    cursor: pointer;
    transition: all 0.35s;    /*设置动画时间*/
}

.box ul {
    list-style: none;
    padding: 0;
}

.box ul li {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: black;
    color: white;
}

.box:hover{
    height: 250px;
}

.box ul:hover :first-child {
    background: gray;
}

.box ul li:hover {
    background: gray;
}

方式二

原理 ：js控制元素隐藏显示
效果如图：

html代码

<ul class="row">
    <li><a href="#">电脑</a></li>
    <li class="drop">
        <a href="#" id="test">手机</a>
        <div class="drop-content none" id="drop_content">
            <a href="">小米</a>
            <a href="">华为</a>
            <a href="">苹果</a>
        </div>
    </li>
    <li><a href="#">平板</a></li>
</ul>

css代码

* {
    margin: 0;
    padding: 0;
}
ul {
    line-height: 50px;
    list-style: none;
}
.row::after {
    content: "";
    display: table;
    clear: both;
}
li {
    float: left;
    text-align: center;
}
a {
    display: inline-block;
    width: 100px;
    background-color: aqua;
    text-decoration: none;
    color: black;
}
a:hover {
    background-color: cadetblue;
}
.drop {
    position: relative;
}
.drop-content {
    position: absolute;
}
.none{
    display: none;
}

javascript代码

<script>
    var test = document.getElementById("test");
    var dropContent = document.getElementById("drop_content");
    test.onclick = function(event){
        dropContent.classList.toggle("none");  //移除掉class"none"
        event.preventDefault();
    }
</script>

Web全栈技术交流

点击链接加入群聊【Web全栈交流群】：https://jq.qq.com/?_wv=1027&k=5rnUzsF