CSS導(dǎo)航可以讓網(wǎng)站菜單更加美觀、易用和便于管理。不過，有時(shí)需要在一個(gè)導(dǎo)航菜單項(xiàng)中添加下拉子菜單以顯示更多選項(xiàng)。這時(shí)候，我們可以使用CSS來實(shí)現(xiàn)。

/* 1. 首先，我們需要設(shè)置導(dǎo)航項(xiàng)的樣式 */
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
float: left;
position: relative; /* 讓子菜單成為絕對(duì)定位元素的參考*/
}
.nav a {
display: block; /* 將鏈接設(shè)置為塊級(jí)元素*/
padding: 0 10px;
line-height: 30px;
text-decoration: none;
color: #333;
}
/* 2. 接下來，添加鼠標(biāo)懸浮時(shí)的樣式 */
.nav li:hover {
background-color: #f5f5f5;
}
.nav li:hover >ul {
display: block; /* 顯示下拉子菜單*/
}
/* 3. 然后，定義子菜單的樣式 */
.nav ul {
position: absolute;
display: none; /* 初始隱藏子菜單*/
top: 100%;
left: 0;
margin: 0;
padding: 0;
list-style: none;
background-color: #fff;
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}
.nav ul li {
width: 200px;
float: left;
}
.nav ul a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.nav ul li:hover {
background-color: #f5f5f5;
}
/* 4. 最后，添加一些細(xì)節(jié)樣式 */
.nav >li:last-child {
float: right;
}
.nav:after {
content: "";
display: table;
clear: both;
}

以上是一個(gè)簡(jiǎn)單的CSS導(dǎo)航菜單，其中包括了下拉子菜單的實(shí)現(xiàn)，通過:hover偽類選擇器和display屬性，實(shí)現(xiàn)在鼠標(biāo)懸浮時(shí)顯示、離開時(shí)隱藏子菜單。而在子菜單的樣式中，則是使用了position:absolute和top、left屬性來使得子菜單在相對(duì)于導(dǎo)航項(xiàng)下方顯示，同時(shí)也有合理的邊框陰影和響應(yīng)鼠標(biāo)hover的鏈接樣式。