本文主要講述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