隨著移動互聯(lián)網(wǎng)的發(fā)展和普及，越來越多的用戶習(xí)慣在手機上瀏覽網(wǎng)頁。因此，如何設(shè)計適合手機瀏覽的網(wǎng)站，成為了每個前端開發(fā)者必須面對的問題之一。在網(wǎng)頁中，導(dǎo)航欄是用戶瀏覽網(wǎng)站時的重要工具。下面我們介紹如何使用 CSS 實現(xiàn)手機上的導(dǎo)航下拉效果。

/*HTML*/
<nav class="menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">文章</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">關(guān)于</a></li>
</ul>
</nav>
/*CSS*/
.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
height: 50px;
font-size: 16px;
}
.menu li {
position: relative;
}
.menu li ul {
position: absolute;
top: 100%;
left: 0;
list-style: none;
margin: 0;
padding: 0;
display: none;
background-color: #333;
width: 100%;
z-index: 1;
}
.menu li:hover ul {
display: flex;
flex-direction: column;
}
.menu li ul li {
border-top: 1px solid #fff;
}
.menu li ul li a {
color: #fff;
padding: 10px;
display: block;
}
@media (max-width: 600px) {
.menu ul {
flex-direction: column;
height: auto;
}
.menu li {
margin-bottom: 10px;
}
.menu li ul {
position: static;
display: none;
}
.menu li:hover ul {
display: none;
}
.menu .toggle {
display: block;
background-color: #333;
color: #fff;
padding: 10px;
cursor: pointer;
}
.menu .toggle:hover {
background-color: #444;
}
.menu .toggle.active {
background-color: #666;
}
.menu ul.active li {
display: block;
}
}

以上便是實現(xiàn)手機導(dǎo)航下拉效果的 CSS 代碼。使用該代碼，我們可以在桌面瀏覽器和移動設(shè)備上實現(xiàn)相同的效果。通過鼠標(biāo)懸浮或點擊按鈕，用戶都可以打開或關(guān)閉下拉菜單，瀏覽網(wǎng)站的各個頁面。