CSS導航無序列表是網站設計中常見的一個元素，通過使用CSS樣式來美化無序列表，使其更加美觀和易于導航。本文將介紹如何創建一個簡單的CSS導航無序列表，并通過代碼演示來幫助您更好地掌握其使用方法。
首先，我們需要使用HTML來創建一個無序列表，代碼如下：

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

在這段代碼中，我們使用了<ul>標簽來創建一個無序列表，其中每個列表項都由一個<li>標簽和一個超鏈接<a>組成，其中href屬性指定了鏈接的URL地址。在創建完無序列表后，我們需要使用CSS樣式來美化它。
下面是一段簡單的CSS樣式代碼，用于為無序列表添加背景顏色、圓角邊框、文字格式和鼠標懸停效果：

ul {
list-style: none;
margin: 0;
padding: 0;
}
<br>
li {
display: inline-block;
margin-right: 20px;
}
<br>
a {
display: block;
background-color: #333;
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
}
<br>
a:hover {
background-color: #666;
}

在這段代碼中，我們首先將無序列表的列表樣式設置為none，以去除默認的列表標記。接下來，將列表項設置為inline-block，以使它們在同一行中顯示，并為每個列表項設置右側邊距，以便在寬屏幕和窄屏幕上都能夠正確地顯示。
然后，我們為超鏈接添加了背景顏色、文本顏色、文本裝飾和填充。我們還為超鏈接添加了一個圓角邊框，以使其看起來更加現代。最后，我們為鼠標懸停狀態下的超鏈接更改了背景顏色，以使其更加易于使用。
通過將上述HTML和CSS代碼結合在一起，我們可以創建一個簡單的CSS導航無序列表。您可以根據需要修改CSS樣式，以便將其與您網站的整體設計風格保持一致。