導航是網頁中重要的組成部分之一，它可以幫助用戶更快速、方便地找到所需頁面。而對于一個優秀的網站導航，不僅需要考慮頁面布局、導航標簽的內容和數量等因素，還需要考慮它的樣式和交互效果。在這里，我們將介紹如何使用自定義 CSS 代碼優化導航的外觀和交互效果。

/* 導航外觀 CSS 代碼 */
.nav-wrap {
background-color: #333;
}
.nav-wrap ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-wrap li {
padding: 10px 20px;
}
.nav-wrap li a {
color: #fff;
text-decoration: none;
}
/* 導航交互 CSS 代碼 */
.nav-wrap li:hover{
background-color: #666;
}
.nav-wrap li.active {
background-color: #666;
}
.nav-wrap li:hover >ul {
display: block;
}
.nav-wrap ul ul {
display: none;
background-color: #666;
position: absolute;
top: 40px;
left: 0;
}

首先，我們用一個包含導航菜單的 <ul> 元素來設置導航的基本外觀和布局，通過將其樣式設置為 flex，可以讓導航菜單水平排列。然后，設置 <li> 元素的樣式，讓菜單項之間有一定的間距。接下來，為 <a> 元素設置樣式，使其字體顏色為白色，且無下劃線。

當用戶將鼠標懸停在菜單項上時，菜單項背景顏色將變為灰色，通過設置 <li> 元素的偽類:hover來實現。同時，當用戶打開某個菜單項的子菜單時，它的背景顏色也應該變為灰色，我們可以通過為該菜單項添加類 active 來實現。

為了實現菜單的下拉效果，我們設置子菜單的外觀和布局，并將其設置為絕對定位。接著，我們通過為hover狀態的菜單項設置 > 符號來實現下拉效果，通過設置 <ul> 元素的 display:none 和:hover狀態下的display:block來控制子菜單的顯示和隱藏。