在網(wǎng)頁(yè)設(shè)計(jì)中，導(dǎo)航菜單作為頁(yè)面的重要組成部分，需要能夠適應(yīng)不同分辨率的設(shè)備。而CSS是實(shí)現(xiàn)導(dǎo)航菜單自適應(yīng)的最佳工具。通過以下代碼，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的自適應(yīng)導(dǎo)航菜單：

/*樣式文件*/
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 20px;
}
nav h1 {
color: #fff;
}
nav ul {
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
justify-content: center;
text-align: center;
}
nav li {
margin-right: 0;
margin-bottom: 10px;
}
}

以上CSS代碼中，首先使用了Flex布局將導(dǎo)航菜單的子元素水平排列。接著，在響應(yīng)式布局的情況下，通過@media規(guī)則改變導(dǎo)航菜單的flex-direction屬性，實(shí)現(xiàn)豎直排列，同時(shí)調(diào)整對(duì)齊方式和文本排列方式等樣式。這樣的導(dǎo)航菜單在不同設(shè)備上均能適應(yīng)頁(yè)面寬度，自動(dòng)調(diào)整布局。

另外，為了讓導(dǎo)航菜單的樣式更加美觀，我們還可以通過hover和active偽類來設(shè)置導(dǎo)航菜單的交互效果，例如：

nav a:hover {
color: #ff6347;
}
nav a:active {
color: #ffa500;
}

以上CSS代碼將hover和active時(shí)的文本顏色分別設(shè)置為橙色和紅橙色，增加了導(dǎo)航菜單的交互性。

總之，通過CSS樣式的設(shè)置，我們可以輕松實(shí)現(xiàn)導(dǎo)航菜單自適應(yīng)和交互效果的優(yōu)化，提供更好的用戶體驗(yàn)。