CSS橫向下拉菜單(兼容IE6)

發(fā)布時間：2013-10-18 16:20:55 作者：佚名

大多數(shù)人會選擇用JavaScript去實現(xiàn)下拉菜單，但其實CSS也可以做到的哦，下面為大家介紹下CSS驅(qū)動的橫向下拉菜單，感興趣的朋友不要錯過

CSS驅(qū)動的橫向下拉菜單（改進版）
由于我的IE是IE7的，所以起初沒有意識到那個下拉菜單在IE6中不能顯示，今天剛把IE7卸了裝了IE6，一般的，由于CSS驅(qū)動的下拉菜單不能在IE6中正常工作，大多數(shù)人會選擇用JavaScript去實現(xiàn)下拉菜單，但其實CSS也可以做到的哦~~
這個關(guān)鍵就是這個語句：body { behavior:url(csshover.htc);}。通過IE特有的屬性behavior調(diào)用一個行為文件，為IE添加一些通常沒有的功能。即只有IE才去下載它，其他瀏覽器不會浪費帶寬去下載它，其缺點是：behavior聲明無法通過樣式表的驗證?？梢詫⒅D(zhuǎn)移到一個單獨的樣式表文件，然后用@import引用它。讓主要的樣式表通過驗證。

下面看一下CSS的源碼，注釋中有給出csshover.htc文件的作用。（我有修改多處源碼，發(fā)現(xiàn)上次寫的有很多不足~~）對了，這個csshover.htc文件可以在http://www.xs4all.nl/~peterned/csshover.html#changes上下載得到。（是英文網(wǎng)站哈，不過單擊橙色的download連接就可以下載了，只是有不同的版本，我這里用的是“Version 1.42.060206 (:hover and :active) download | view”這個連接的版本。）不廢話了，還是看源碼吧~~
BODY部分

復制代碼

代碼如下:

<ul id="nav2">
<li><a href="">文章</a>
<ul>
<li><a href="">CSS教程</a></li>
<li><a href="">DOM教程</a></li>
<li><a href="">XML教程</a></li>
<li><a href="">FLASH教程</a></li>
</ul>
</li>
<li><a href="">交流</a>
<ul>
<li><a href="">CSS應用</a></li>
<li><a href="">XML應用</a></li>
<li><a href="">FLASHAS編程</a></li>
<li><a href="">DW網(wǎng)頁制作</a></li>
</ul>
</li>
<li><a href="">博客</a>
<ul>
<li><a href="">全部</a></li>
<li><a href="">網(wǎng)頁特效</a></li>
<li><a href="">高級編程</a></li>
<li><a href="">FLASH動畫</a></li>
</ul>
</li>
</ul>

CSS部分

復制代碼

代碼如下:

/* CSS驅(qū)動的橫向下拉菜單 */
body {
behavior:url(csshover.htc);
}
ul#nav2 {
padding:0px;
margin:0px;
}
/*注意：列表<ul>不可以是列表的子結(jié)點，但可以是列表項<li>的子結(jié)點*/
ul#nav2 li {
float:left;
width:160px;
list-style:none;
}/*列表項水平浮動，使形成橫向的一級菜單*/
ul#nav2 li ul { /*設(shè)置下拉菜單不可見，只有當鼠標經(jīng)過使才可見*/
display:none;
margin:0;
padding:0;/*去除所以的縮進(不同瀏覽器對列表的內(nèi)外邊距默認設(shè)置不一樣，在這里設(shè)置使消除不同瀏覽器間的不同效果）*/
}
ul#nav2 li:hover ul{
display:block;
}
ul#nav2 li li:hover {
background-color:#f4f4f4;
}
/*CSS中允許將懸停樣式用在所有元素中，而IE只運行應用在連接上，
但是，csshover.htc文件的唯一作用就是給IE增加了任意元素的懸停功能。*/
ul#nav2 li a{
display:block;
border:1px solid #c5c6c4;
text-decoration:none;
color:#000;
}
ul#nav2 li li a { /*對下拉菜單中的項進行修飾*/
display:block;
font-size:12px;
border:1px solid #ccc;
padding:3px;
text-decoration:none;
color:#777;
width:152px;/*使所有列表項寬度統(tǒng)一，160-3*2-1*2=152px*/
}
/*IE中display:block不足以使連接a的可單擊區(qū)域填充整個列表項，但如果給連接設(shè)置一個明確的寬度，就可以得到想要的行為。對于其他的瀏覽器，只需要將width重新跳回auto讓瀏覽器自己自己調(diào)整就可以即可。*/
ul#nav2>li li a {
width:auto;
}
/*子選擇器>對IE6以下不可見，所以IE6不會去執(zhí)行它*/

OK~~,到這里不同瀏覽器的CSS驅(qū)動的下拉菜單就告一段落了，不過，可能有的朋友會想讓子菜單放在其他的位置，而不是默認的一級菜單的正下方，也好辦：
1.在ul#nav2 li選擇器中添加position:relative;
2.在ul#nav2 li ul 選擇器中添加position:absolute;
3.這樣就將一級菜單的各列表項（已相對定位）為任何絕度定位的子孫元素建立了一個容器塊，即絕對定位了的子菜單將以它為定位的起始點，通過添加top,left屬性定位調(diào)整與一級菜單的關(guān)系來調(diào)整自己的位置（即距離容器塊左上角的位置偏移量）。