無序列表UL在網頁中除顯示樹狀結構外，最常用的用途就是作為導航欄的菜單使用，而它的樣式通過CSS來設定，這種把樣式與數據分離的做法既能有豐富多彩的效果，又易于變換，值得好好研究一下。
無序列表的默認效果
無序列表的代碼
<ul>
<li><a href='#'>菜單001</a></li>
<li><a href='#'>菜單002</a></li>
<li><a href='#'>菜單003</a></li>
<li><a href='#'>菜單004</a></li>
<li><a href='#'>菜單005</a></li>
<li><a href='#'>菜單006</a></li>
<li><a href='#'>菜單007</a></li>
<li><a href='#'>菜單008</a></li>
</ul>
豎向導航欄的實現效果
上邊是豎向導航欄的效果，這在許多網站上很常見
取消無序列表的列表效果
如前頁，如果不加設置，無序列表的li子項前會出現圓點效果，這對導航欄來說是需要取消的。
取消列表效果使用對ul進行列表樣式設置就可以了，代碼如下：
list-style-type:none;
無序列表菜單項的按鈕效果實現
設置無序列表子項的背景，就能使無序列表子項出現方塊效果。代碼舉例如下：
background:#efb57c;
使無序列表子項出現按鈕的效果，對邊框設置進行特殊設置即可，具體如下：
border:2px outset #efb57c;
無序列表菜單項的動態效果實現
實現動態效果，對ul中的鏈接狀態進行設置即可，代碼如右。
ul a:link{
background:#efb57c;
border:2px outset #efb57c;
}
ul a:visited{
background:#efb57c;
border:2px outset #efb57c;
}
ul a:focus{
background:#daa670;
border:2px outset #daa670;
color:black;
}
ul a:hover{
background:#daa670;
border:2px outset #daa670;
color:black;
}
ul a:active{
background:#bb8e60;
border:2px outset #bb8e60;
}
實現
上述效果的全體代碼
ul{
margin:0;
padding:0;
list-style-type:none;
}
ul a{
display:block;
padding:2px;
text-align:center;
text-decoration:none;
width:130px;
margin:2px;
color:#8d4f10;
}
ul a:link{
background:#efb57c;
border:2px outset #efb57c;
}
ul a:visited{
background:#efb57c;
border:2px outset #efb57c;
}
ul a:focus{
background:#daa670;
border:2px outset #daa670;
color:black;
}
ul a:hover{
background:#daa670;
border:2px outset #daa670;
color:black;
}
ul a:active{
background:#bb8e60;
border:2px outset #bb8e60;
}
li{
padding-left:10px;
}
橫向菜單的實現效果
使用無序列表制作橫向菜單也很常見，例圖如下：
將無序列表默認的縱向改為橫向
無序列表子項默認是縱向的，需要將它改為橫向，要實現這里只要讓子項li浮動起來即可，如同設置一行內放置多個div一樣。代碼如下：
#menubar li{
float:left;
}
其它顏色，背景設置等不再贅述。
橫向菜單CSS設置代碼
#menubar{
margin:0px;
width:100%;
text-align:right;
}
#menubar ul{
margin:0;
padding:0;
list-style-type:none;
}
#menubar li{
float:left;
}
#menubar li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:70px;
height:22px;
text-align:center;
background-color:#eefaec;
margin-left:2px;
}
#menubar li a:hover{
color:#b9ecae;
}