css ul li實現縱嚮導航菜單效果

效果如下

代碼如下

複製代碼

<style type="text/css"> #navsite {     font-family: Verdana, Helvetica, Arial, sans-serif;     font-size: 0.7em;     font-weight: bold;     width: 12em;     border-right: 1px solid #666;     padding: 0;     margin-bottom: 1em;     background-color: #9cc;     color: #333; } #navsite ul {     list-style: none;     margin: 0;     padding: 0; } #navsite ul li {     margin: 0;     border-top: 1px solid #003; } #navsite ul li a {     display: block;     padding: 2px 2px 2px 0.5em;     border-left: 10px solid #369;     border-right: 1px solid #69c;     border-bottom: 1px solid #369;     background-color: #036;     color: #fff;     text-decoration: none;     width: 100%; } html>body #navsite ul li a {     width: auto; } #navsite ul li a:hover {     border-left: 10px solid #036;     border-right: 1px solid #69c;     border-bottom: 1px solid #369;     background-color: #69f;     color: #fff; }   </style> html <div id="navsite">     <ul>         <li><a href="http://www.111cn.net">首頁</a></li>         <li><a href="http://www.111cn.net">技術文章</a></li>         <li><a href="http://www.111cn.net">聯絡我們</a></li>         <li><a href="http://www.111cn.net">提交文章</a></li>         <li><a href="http://www.111cn.net">好主題</a></li>     </ul> </div>