導航欄是網站或應用程序中常見的組件之一，可以讓用戶快速找到所需內容。作為一名CSS代碼菜鳥，你可能不知道如何編寫一個基本的導航欄，但在這里，我將向你介紹如何編寫一個簡單的導航欄，以及如何使用CSS來設計它。

接下來，讓我們開始編寫CSS代碼。首先，我們需要為導航欄創建一個類名，例如“nav”。

.nav {

position: relative;

width: 100%;

padding-top: 20px;

.nav > li {

position: absolute;

display: inline-block;

width: 20%;

text-align: center;

list-style-type: none;

margin-bottom: 10px;

.nav > li:last-child {

margin-bottom: 0;

.nav > ul {

display: none;

.nav > li > a {

display: block;

text-align: center;

padding: 8px 16px;

color: #333;

text-decoration: none;

border-radius: 4px;

background-color: #f2f2f2;

.nav > li > a:hover {

background-color: #ddd;

.nav > ul {

display: inline-block;

margin-bottom: 20px;

.nav > ul > li {

display: inline-block;

width: 80%;

text-align: left;

.nav > ul > li:last-child {

width: 20%;

text-align: center;

.nav > ul > li > a {

width: 40%;

padding: 12px 16px;

color: #fff;

text-decoration: none;

border-radius: 4px;

background-color: #f2f2f2;

.nav > ul > li > a:hover {

background-color: #ddd;

接下來，我們為導航欄的下欄添加了一個名為“nav > ul”的列表，并設置了一個顯示None的類名，以隱藏它。我們還為列表的每個子元素添加了一個名為“li”的類名，并設置了一個80%的寬度和左對齊的樣式。最后，我們還為列表的每個子元素添加了一個“a”標簽，并在其上添加了一個40%的寬度和居中對齊的樣式。

以上就是一個簡單的導航欄的CSS代碼的示例，你可以通過復制和粘貼這段代碼，創建一個你自己風格的導航欄。