CSS（層疊樣式表）已經成為前端開發中不可或缺的一部分，它可以幫助我們美化頁面，讓網站更加吸引人。其中一個非常重要且好看的功能就是導航欄。

nav {
background-color: #222;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
nav a {
color: #fff;
text-decoration: none;
margin-left: 20px;
font-size: 16px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}

以上代碼是一個簡單導航欄的樣式，其中的關鍵點有：

• 背景顏色為深色
• 高度為50px
• 使用flex布局使得菜單項之間的距離相等
• 鼠標懸停時，為菜單項添加下劃線

此外，我們還可以添加更多的效果，比如動畫效果。以下代碼是一個帶有下拉菜單的導航欄樣式：

nav {
background-color: #222;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
nav a {
color: #fff;
text-decoration: none;
margin-left: 20px;
font-size: 16px;
font-weight: bold;
position: relative;
}
nav a:hover {
text-decoration: underline;
}
nav ul {
position: absolute;
top: 50px;
left: 0;
background-color: #222;
padding: 10px;
display: none;
}
nav li {
margin-bottom: 10px;
}
nav a:hover + ul,
nav ul:hover {
display: block;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: normal;
}

以上代碼中，我們給菜單項添加了一個下拉菜單功能。鼠標懸停在菜單項上時，下拉菜單會展開，使用position屬性設置下拉菜單的位置，使用display屬性設置下拉菜單的顯示狀態，使用hover屬性設置懸停效果。

總之，CSS可以幫助我們設計出非常好看的功能欄。只需要將樣式設置得當，就能夠讓網站更加吸引人。