在網站設計中，列表主菜單和子菜單是非常常見的設計元素。通過優秀的CSS編寫，可以使其看起來非常美觀而且容易使用。

首先，我們需要創建一個列表。通常情況下，一個主菜單將會包含若干個子菜單。例如：

<ul id="menu">
<li>主菜單1
<ul>
<li>子菜單1</li>
<li>子菜單2</li>
</ul>
</li>
<li>主菜單2</li>
<li>主菜單3
<ul>
<li>子菜單3-1</li>
<li>子菜單3-2</li>
</ul>
</li>
</ul>

為了使這個列表更容易使用，我們需要它看起來清晰明了。這種時候，就需要用到CSS了。

首先，我們需要給主菜單加上樣式，這樣他們就會看起來和普通的鏈接一樣。例如：

#menu li {
display: inline-block;
margin-right: 10px;
}
#menu li a {
text-decoration: none;
color: black;
padding: 5px;
border: 1px solid black;
}

這里我們讓主菜單顯示為內聯塊，并且加上了一些簡單的邊框，并且讓鏈接看起來更清晰。

然后我們需要給子菜單加上樣式。為了使其更容易區分，我們可以使用一些不同的樣式。例如：

#menu li ul {
display: none;
position: absolute;
z-index: 999;
}
#menu li:hover ul {
display: block;
}
#menu li ul li {
display: block;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}
#menu li ul li a {
display: block;
color: #333;
padding: 8px 16px;
text-decoration: none;
}
#menu li ul li:hover {
background-color: #f2f2f2;
}

首先，我們需要隱藏子菜單。這通過設置display: none來實現。當鼠標懸停在主菜單時，我們將子菜單顯式出來。這是通過使用:hover選擇器實現的。

然后，我們需要給子菜單中的鏈接設置樣式。我們使用background-color為它們設置背景顏色，使用padding來控制它們的大小和定位。而且我們也消除了任何文本裝飾，比如下劃線。

當鼠標懸停在子菜單的選項上時，我們可以使用:hover來改變背景顏色，以使其更加協調。

總的來說，通過一些簡單的CSS代碼，我們可以它改善網站的用戶體驗，使其更加直觀和易于使用。