導(dǎo)航菜單在網(wǎng)頁設(shè)計中非常常見，它可以幫助網(wǎng)站的用戶快速地找到自己需要的內(nèi)容。而CSS可以為導(dǎo)航菜單帶來更多的樣式和交互效果。

nav {
background-color: #333;
height: 50px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
line-height: 50px;
padding: 0 20px;
display: inline-block;
}
nav a:hover {
background-color: #555;
}

在上述代碼中，我們定義了一個導(dǎo)航菜單的樣式，其中nav為導(dǎo)航菜單的容器，設(shè)置了背景色和高度。nav a為導(dǎo)航菜單里的鏈接，設(shè)置了字體顏色、大小、行高、內(nèi)邊距和行內(nèi)塊的顯示方式。同時，我們還為鼠標懸停時的狀態(tài)設(shè)置了背景顏色。

通過這些樣式的設(shè)置，我們可以輕松地創(chuàng)建一個簡單的導(dǎo)航菜單。除此之外，我們還可以使用CSS實現(xiàn)更多的效果，比如下拉菜單、當(dāng)前頁狀態(tài)的高亮顯示等。

nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
position: relative;
}
nav li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 50px;
left: 0;
background-color: #fff;
}
nav ul ul li {
float: none;
width: 200px;
}
nav ul ul a {
color: #333;
line-height: 30px;
}
nav ul ul a:hover {
background-color: #eee;
}
nav li.active a {
background-color: #555;
}

上述代碼中，我們使用了列表元素ul和li來創(chuàng)建下拉菜單。nav li:hover ul表示鼠標懸停在導(dǎo)航菜單的某一項上時，該項下面的ul會顯示出來。nav ul ul為下拉菜單的容器，設(shè)置了絕對定位和背景顏色。nav ul ul li和nav ul ul a為下拉菜單中的每一項，設(shè)置了寬度和字體顏色。通過這些樣式，我們就可以輕松地創(chuàng)建一個下拉菜單。同時，我們還為當(dāng)前頁的狀態(tài)設(shè)置了高亮顯示。

總的來說，導(dǎo)航菜單是網(wǎng)站設(shè)計中很重要的一部分，而CSS可以為導(dǎo)航菜單帶來更多的樣式和交互效果。通過靈活運用CSS樣式，我們可以為用戶帶來更好的使用體驗。