在web開發中，下級導航是非常常見的一種導航方式，而CSS可以輕松地實現下級導航的自動展開效果。

/* HTML結構 */
<nav>
<ul>
<li>
<a href="#">一級導航A</a>
<ul>
<li><a href="#">二級導航A1</a></li>
<li><a href="#">二級導航A2</a></li>
<li><a href="#">二級導航A3</a></li>
</ul>
</li>
<li>
<a href="#">一級導航B</a>
<ul>
<li><a href="#">二級導航B1</a></li>
<li><a href="#">二級導航B2</a></li>
<li><a href="#">二級導航B3</a></li>
</ul>
</li>
</ul>
</nav>
/* CSS代碼 */
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
background-color: #ccc;
color: #fff;
text-decoration: none;
}
nav ul li ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 100%;
left: 0;
}
nav ul li:hover >ul {
display: block;
}

以上代碼實現了一個簡單的下級導航，并且使用CSS的:hover偽類實現了鼠標經過一級導航時下級導航的自動展開效果。其中，nav ul li:hover >ul 表示當鼠標經過一級導航時，它下面的子菜單將顯示出來。

通過這種方式，我們可以輕松地為網站添加下級導航效果，提高網站的用戶體驗和導航功能。