CSS垂直樹形下拉式功能表

第一步:建立菜單

首先建立菜單架構非常重要,最好的方法是使用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 */

第三部:讓它運作起來

我們需要在我們移動到主菜單上時顯示副菜單內容:

以下是引用片段： li:hover ul { display: block; }

好了,你可以測試下代碼了,1%人可能會興奮地叫起來,呵呵遺憾的是就目前這些代碼還不能夠在IE上運做作出我們想要的結果.要讓IE運作出一樣的效果,我們得使用一段JS代碼,不會非常的煩瑣:

以下是引用片段： startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over";   }   node.onmouseout=function() {   this.className=this.className.replace»  (" over", "");    }    }   }  } } window.onload=startList;

好了,其他代碼再做下補充,這個功能就能實現了:

以下是引用片段： li:hover ul, li.over ul {   display: block; } <ul id="nav">

自己動手做一個吧,可以更好看些