DIV+CSS設計實例：垂直樹形下拉菜單_Web標準教程

第一步:建立菜單

首先建立菜單架構非常重要,最好的方法是使用ul來建立各菜單內容的從主關系.很復雜么?其實只要一路寫下去就OK了:

以下為引用的內容：
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Hosting</a></li> 
        <li><a href="#">Domain Names</a></li> 
        <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>

    <li><a href="#">Contact Us</a> 
      <ul> 
        <li><a href="#">United Kingdom</a></li> 
        <li><a href="#">France</a></li> 
        <li><a href="#">USA</a></li> 
        <li><a href="#">Australia</a></li> 
      </ul> 
    </li> 
  </ul>

第二步:視覺上的修飾

上面所寫的代碼直接在瀏覽器下可以說非常的難看...所以我們先給他們加上點樣式,不至于因為外表的問題弄的你沒有興趣繼續做下去,呵呵

首先我們把煩人的點點去掉,并定義這個菜單的寬度:

以下為引用的內容：
ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
           border-bottom: 1px solid #ccc;
 }

接下來,我們要定義里面內容部分,非常幸運,列表默認的排列就是垂直的,這與我們的要求相一致,定位方式我們應該設置為相對定位(relative)因為副菜單要在相對的位置上進行絕對定位:

以下為引用的內容：
ul li {  position: relative;  }

現在我們定義的就是副菜單的內容部分,使用left和top屬性我們就可以讓它們顯示在主菜單內容的右邊.display屬性值為none所以在默認情況下是隱藏的:

以下為引用的內容：
li ul {  position: absolute;  left: 149px;  top: 0;  display: none;  }

最后得修飾下里面的a元素:

以下為引用的內容：
ul li a {
 display: block;
 text-decoration: none;
 color: #777;
 background: #fff;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

但因為IE的顯示BUG,所以得加上下面這段話進行修復:

以下為引用的內容：
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */