首先建立菜單架構非常重要,最好的方法是使用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">
自己動手做一個吧,可以更好看些