在網站設計中，菜單導航是一個非常重要的組件。大多數網站都會使用菜單導航來幫助用戶瀏覽和使用網站的功能，因此菜單導航的設計也非常重要。在本文中，我們將介紹一些常見的菜單導航樣式的CSS代碼。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin-right: 20px;
}
.nav a {
text-decoration: none;
color: #333;
font-size: 16px;
transition: all .2s ease-in-out;
}
.nav a:hover {
color: #1abc9c;
}

上面的代碼展示了一個簡單的橫向菜單導航。菜單導航的容器是一個具有flex布局的div元素。菜單的每一個選項都是一個li元素，每一個選項上都有一個a標簽用來連接到其他頁面。這個樣式設置了菜單容器的背景色、內邊距和陰影。每個菜單選項使用margin-right來排列位置，而a標簽使用顏色過渡動畫，當用戶鼠標移動到菜單選項上時文字顏色將從黑色變為綠色。

.nav {
display: block;
background-color: #f7f7f7;
padding: 20px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
.nav li:last-child {
margin-right: 0;
}
.nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
font-size: 16px;
}
.nav a:hover {
text-decoration: underline;
background-color: #1abc9c;
color: #fff;
}

這個代碼是一個簡單的豎向菜單導航。菜單容器是一個盒模型元素，菜單選項是可以被放在一起的li元素。每個菜單選項都是由一個a標簽來實現。這個代碼設置了菜單容器的背景顏色、內邊距及菜單選項的水平間距，同時還設置了每個菜單選項被選中時的背景顏色和文字顏色。