導航菜單是網站或應用程序中常用的一種功能，用于導航到不同的頁面或位置。純CSS定義的導航菜單可以通過簡單的HTML結構和CSS樣式來創建，具有靈活的布局和自定義的外觀。

下面是一個簡單的純CSS定義的導航菜單示例：

```html

```css

.nav {

position: relative;

width: 200px;

padding: 20px;

.nav ul {

list-style: none;

display: inline-block;

margin: 0;

padding: 0;

.nav li {

display: inline-block;

position: relative;

margin-right: 10px;

.nav a {

padding: 10px;

text-decoration: none;

display: block;

margin-bottom: 5px;

.nav a:hover {

background-color: #f2f2f2;

.nav ul li:hover {

background-color: #ddd;

在這個示例中，我們使用了一個`div`元素作為導航菜單的容器，并使用了`class`屬性為`nav`元素定義了樣式。`nav`元素被設置為寬度為200px，并使用`padding`屬性設置了額外的10px。`ul`元素被設置為`display: inline-block`，并使用`margin`和`padding`屬性設置了其內邊距和邊長。`li`元素被設置為`display: inline-block`，并使用`position: relative`屬性將其定位到`ul`元素的頂部。`margin-right`屬性用于將`li`元素與`ul`元素之間的空白縮小，使其與`ul`元素對齊。

最后，我們定義了`li:hover`元素作為菜單項的樣式。當鼠標懸停在`li`元素上時，它會顯示一個背景顏色，以表示它是當前活動的菜單項。當鼠標移開時，它不會恢復為原始背景顏色，而是繼續保持活動狀態。

通過使用純CSS，我們可以創建出靈活、自定義的導航菜單，無需任何JavaScript或其他外部技術。