CSS橫向下拉菜單(兼容IE6)
發(fā)布時(shí)間：2013-10-18 16:20:55 作者：佚名 
我要評(píng)論
我要評(píng)論大多數(shù)人會(huì)選擇用JavaScript去實(shí)現(xiàn)下拉菜單，但其實(shí)CSS也可以做到的哦，下面為大家介紹下CSS驅(qū)動(dòng)的橫向下拉菜單，感興趣的朋友不要錯(cuò)過(guò)
CSS驅(qū)動(dòng)的橫向下拉菜單（改進(jìn)版）
由于我的IE是IE7的，所以起初沒有意識(shí)到那個(gè)下拉菜單在IE6中不能顯示，今天剛把IE7卸了裝了IE6，一般的，由于CSS驅(qū)動(dòng)的下拉菜單不能在IE6中正常工作，大多數(shù)人會(huì)選擇用JavaScript去實(shí)現(xiàn)下拉菜單，但其實(shí)CSS也可以做到的哦~~
這個(gè)關(guān)鍵就是這個(gè)語(yǔ)句：body { behavior:url(csshover.htc);}。通過(guò)IE特有的屬性behavior調(diào)用一個(gè)行為文件，為IE添加一些通常沒有的功能。即只有IE才去下載它，其他瀏覽器不會(huì)浪費(fèi)帶寬去下載它，其缺點(diǎn)是：behavior聲明無(wú)法通過(guò)樣式表的驗(yàn)證?？梢詫⒅D(zhuǎn)移到一個(gè)單獨(dú)的樣式表文件，然后用@import引用它。讓主要的樣式表通過(guò)驗(yàn)證。
下面看一下CSS的源碼，注釋中有給出csshover.htc文件的作用。（我有修改多處源碼，發(fā)現(xiàn)上次寫的有很多不足~~）對(duì)了，這個(gè)csshover.htc文件可以在http://www.xs4all.nl/~peterned/csshover.html#changes上下載得到。（是英文網(wǎng)站哈，不過(guò)單擊橙色的download連接就可以下載了，只是有不同的版本，我這里用的是“Version 1.42.060206 (:hover and :active) download | view”這個(gè)連接的版本。）不廢話了，還是看源碼吧~~
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應(yīng)用</a></li>
<li><a href="">XML應(yīng)用</a></li>
<li><a href="">FLASHAS編程</a></li>
<li><a href="">DW網(wǎng)頁(yè)制作</a></li>
</ul>
</li>
<li><a href="">博客</a>
<ul>
<li><a href="">全部</a></li>
<li><a href="">網(wǎng)頁(yè)特效</a></li>
<li><a href="">高級(jí)編程</a></li>
<li><a href="">FLASH動(dòng)畫</a></li>
</ul>
</li>
</ul>
CSS部分
/* CSS驅(qū)動(dòng)的橫向下拉菜單 */
body {
behavior:url(csshover.htc);
}
ul#nav2 {
padding:0px;
margin:0px;
}
/*注意：列表<ul>不可以是列表的子結(jié)點(diǎn)，但可以是列表項(xiàng)<li>的子結(jié)點(diǎn)*/
ul#nav2 li {
float:left;
width:160px;
list-style:none;
}/*列表項(xiàng)水平浮動(dòng)，使形成橫向的一級(jí)菜單*/
ul#nav2 li ul { /*設(shè)置下拉菜單不可見，只有當(dāng)鼠標(biāo)經(jīng)過(guò)使才可見*/
display:none;
margin:0;
padding:0;/*去除所以的縮進(jìn)(不同瀏覽器對(duì)列表的內(nèi)外邊距默認(rèn)設(shè)置不一樣，在這里設(shè)置使消除不同瀏覽器間的不同效果）*/
}
ul#nav2 li:hover ul{
display:block;
}
ul#nav2 li li:hover {
background-color:#f4f4f4;
}
/*CSS中允許將懸停樣式用在所有元素中，而IE只運(yùn)行應(yīng)用在連接上，
但是，csshover.htc文件的唯一作用就是給IE增加了任意元素的懸停功能。*/
ul#nav2 li a{
display:block;
border:1px solid #c5c6c4;
text-decoration:none;
color:#000;
}
ul#nav2 li li a { /*對(duì)下拉菜單中的項(xiàng)進(jìn)行修飾*/
display:block;
font-size:12px;
border:1px solid #ccc;
padding:3px;
text-decoration:none;
color:#777;
width:152px;/*使所有列表項(xiàng)寬度統(tǒng)一，160-3*2-1*2=152px*/
}
/*IE中display:block不足以使連接a的可單擊區(qū)域填充整個(gè)列表項(xiàng)，但如果給連接設(shè)置一個(gè)明確的寬度，就可以得到想要的行為。對(duì)于其他的瀏覽器，只需要將width重新跳回auto讓瀏覽器自己自己調(diào)整就可以即可。*/
ul#nav2>li li a {
width:auto;
}
/*子選擇器>對(duì)IE6以下不可見，所以IE6不會(huì)去執(zhí)行它*/
OK~~,到這里不同瀏覽器的CSS驅(qū)動(dòng)的下拉菜單就告一段落了，不過(guò)，可能有的朋友會(huì)想讓子菜單放在其他的位置，而不是默認(rèn)的一級(jí)菜單的正下方，也好辦：
1.在ul#nav2 li選擇器中添加position:relative;
2.在ul#nav2 li ul 選擇器中添加position:absolute;
3.這樣就將一級(jí)菜單的各列表項(xiàng)（已相對(duì)定位）為任何絕度定位的子孫元素建立了一個(gè)容器塊，即絕對(duì)定位了的子菜單將以它為定位的起始點(diǎn)，通過(guò)添加top,left屬性定位調(diào)整與一級(jí)菜單的關(guān)系來(lái)調(diào)整自己的位置（即距離容器塊左上角的位置偏移量）。
由于我的IE是IE7的，所以起初沒有意識(shí)到那個(gè)下拉菜單在IE6中不能顯示，今天剛把IE7卸了裝了IE6，一般的，由于CSS驅(qū)動(dòng)的下拉菜單不能在IE6中正常工作，大多數(shù)人會(huì)選擇用JavaScript去實(shí)現(xiàn)下拉菜單，但其實(shí)CSS也可以做到的哦~~
這個(gè)關(guān)鍵就是這個(gè)語(yǔ)句：body { behavior:url(csshover.htc);}。通過(guò)IE特有的屬性behavior調(diào)用一個(gè)行為文件，為IE添加一些通常沒有的功能。即只有IE才去下載它，其他瀏覽器不會(huì)浪費(fèi)帶寬去下載它，其缺點(diǎn)是：behavior聲明無(wú)法通過(guò)樣式表的驗(yàn)證?？梢詫⒅D(zhuǎn)移到一個(gè)單獨(dú)的樣式表文件，然后用@import引用它。讓主要的樣式表通過(guò)驗(yàn)證。
下面看一下CSS的源碼，注釋中有給出csshover.htc文件的作用。（我有修改多處源碼，發(fā)現(xiàn)上次寫的有很多不足~~）對(duì)了，這個(gè)csshover.htc文件可以在http://www.xs4all.nl/~peterned/csshover.html#changes上下載得到。（是英文網(wǎng)站哈，不過(guò)單擊橙色的download連接就可以下載了，只是有不同的版本，我這里用的是“Version 1.42.060206 (:hover and :active) download | view”這個(gè)連接的版本。）不廢話了，還是看源碼吧~~
BODY部分
復(fù)制代碼
代碼如下:<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應(yīng)用</a></li>
<li><a href="">XML應(yīng)用</a></li>
<li><a href="">FLASHAS編程</a></li>
<li><a href="">DW網(wǎng)頁(yè)制作</a></li>
</ul>
</li>
<li><a href="">博客</a>
<ul>
<li><a href="">全部</a></li>
<li><a href="">網(wǎng)頁(yè)特效</a></li>
<li><a href="">高級(jí)編程</a></li>
<li><a href="">FLASH動(dòng)畫</a></li>
</ul>
</li>
</ul>
CSS部分
復(fù)制代碼
代碼如下:/* CSS驅(qū)動(dòng)的橫向下拉菜單 */
body {
behavior:url(csshover.htc);
}
ul#nav2 {
padding:0px;
margin:0px;
}
/*注意：列表<ul>不可以是列表的子結(jié)點(diǎn)，但可以是列表項(xiàng)<li>的子結(jié)點(diǎn)*/
ul#nav2 li {
float:left;
width:160px;
list-style:none;
}/*列表項(xiàng)水平浮動(dòng)，使形成橫向的一級(jí)菜單*/
ul#nav2 li ul { /*設(shè)置下拉菜單不可見，只有當(dāng)鼠標(biāo)經(jīng)過(guò)使才可見*/
display:none;
margin:0;
padding:0;/*去除所以的縮進(jìn)(不同瀏覽器對(duì)列表的內(nèi)外邊距默認(rèn)設(shè)置不一樣，在這里設(shè)置使消除不同瀏覽器間的不同效果）*/
}
ul#nav2 li:hover ul{
display:block;
}
ul#nav2 li li:hover {
background-color:#f4f4f4;
}
/*CSS中允許將懸停樣式用在所有元素中，而IE只運(yùn)行應(yīng)用在連接上，
但是，csshover.htc文件的唯一作用就是給IE增加了任意元素的懸停功能。*/
ul#nav2 li a{
display:block;
border:1px solid #c5c6c4;
text-decoration:none;
color:#000;
}
ul#nav2 li li a { /*對(duì)下拉菜單中的項(xiàng)進(jìn)行修飾*/
display:block;
font-size:12px;
border:1px solid #ccc;
padding:3px;
text-decoration:none;
color:#777;
width:152px;/*使所有列表項(xiàng)寬度統(tǒng)一，160-3*2-1*2=152px*/
}
/*IE中display:block不足以使連接a的可單擊區(qū)域填充整個(gè)列表項(xiàng)，但如果給連接設(shè)置一個(gè)明確的寬度，就可以得到想要的行為。對(duì)于其他的瀏覽器，只需要將width重新跳回auto讓瀏覽器自己自己調(diào)整就可以即可。*/
ul#nav2>li li a {
width:auto;
}
/*子選擇器>對(duì)IE6以下不可見，所以IE6不會(huì)去執(zhí)行它*/
OK~~,到這里不同瀏覽器的CSS驅(qū)動(dòng)的下拉菜單就告一段落了，不過(guò)，可能有的朋友會(huì)想讓子菜單放在其他的位置，而不是默認(rèn)的一級(jí)菜單的正下方，也好辦：
1.在ul#nav2 li選擇器中添加position:relative;
2.在ul#nav2 li ul 選擇器中添加position:absolute;
3.這樣就將一級(jí)菜單的各列表項(xiàng)（已相對(duì)定位）為任何絕度定位的子孫元素建立了一個(gè)容器塊，即絕對(duì)定位了的子菜單將以它為定位的起始點(diǎn)，通過(guò)添加top,left屬性定位調(diào)整與一級(jí)菜單的關(guān)系來(lái)調(diào)整自己的位置（即距離容器塊左上角的位置偏移量）。
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁(yè)面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非常基礎(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來(lái)可能會(huì)發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來(lái)控制網(wǎng)頁(yè)的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級(jí),本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場(chǎng)景、常見問(wèn)題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語(yǔ)法、常見使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁(yè)控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過(guò)鼠標(biāo)懸浮顯示提示文字效果,通過(guò)設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動(dòng)態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,通過(guò)對(duì)象語(yǔ)法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式；通過(guò)數(shù)組語(yǔ)法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
