CSS簡易功能表

實作，實作。

<div id="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Sports</a></li>
</ul>
</div>

body { background-color : #ffdee0;}
#nav { width:200px; font-family : Arial ;} /*寬度與字型*/
#nav ul { list-style-type : none; margin : 0px; padding : 0px;} /*取消樣式*/
#nav li { border-bottom : solid 1px #ed9f9f;} /*li底線顏色*/
#nav li a { display:block ; /*a區塊顯示*/ 
padding : 5px 5px 5px 0.5em;  /* 左邊留0.5em空白*/
text-decoration : none;  /*取消底線*/
border-left : 12px solid #711515; /* 左邊產生12px粗bar*/
border-right : 1px solid #711515;} /* 右邊產生1px細bar*/
#nav li a:link, #nav li a:visited { background-color : #c11136; color :#ffffff;} /*設定:link與:visited的背景與文字顏色*/
#nav li a:hover { background-color : #990020; color : #ffff00;}/*設定:hover背景與文字顏色*/

一個CSS排版的簡易功能表出現。