CSS横向往下拉菜单(适配IE6)

2021-03-09 02:45 jianzhan
CSS驱动器的横向往下拉菜单(改善版)
因为我的IE是IE7的,因此最初沒有观念到那个往下拉菜单在IE6中不可以显示信息,今日刚把IE7卸了装了IE6,1般的,因为CSS驱动器的往下拉菜单不可以在IE6中一切正常工作中,大多数数人会挑选用JavaScript去完成往下拉菜单,但实际上CSS还可以保证的哦~~
这个重要便是这个句子:body { behavior:url(csshover.htc);}。根据IE独有的特性behavior启用1个个人行为文档,为IE加上1些一般沒有的作用。即仅有IE才去免费下载它,别的访问器不容易消耗带宽去免费下载它,其缺陷是:behavior申明没法根据款式表的认证。能够将之迁移到1个独立的款式表文档,随后用@import引入它。让关键的款式表根据认证。

下面看1下CSS的源代码,注解中有得出csshover.htc文档的功效。(我有改动多处源代码,发现之前写的有许多不够~~)对了,这个csshover.htc文档能够在http://www.xs4all.nl/~peterned/csshover.html#changes左右载获得。(是英文网站哈,但是点击橙色的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网页页面制做</a></li>
</ul>
</li>
<li><a href="">blog</a>
<ul>
<li><a href="">所有</a></li>
<li><a href="">网页页面殊效</a></li>
<li><a href="">高級程序编写</a></li>
<li><a href="">FLASH动漫</a></li>
</ul>
</li>
</ul>

CSS一部分

拷贝编码
编码以下:

/* CSS驱动器的横向往下拉菜单 */
body {
behavior:url(csshover.htc);
}
ul#nav2 {
padding:0px;
margin:0px;
}
/*留意:目录<ul>不能因此目录的子结点,但能够是目录项<li>的子结点*/
ul#nav2 li {
float:left;
width:160px;
list-style:none;
}/*目录项水平波动,使产生横向的1级菜单*/
ul#nav2 li ul { /*设定往下拉菜单不能见,仅有当电脑鼠标历经使才可见*/
display:none;
margin:0;
padding:0;/*除去因此的缩进(不一样访问器对目录的內外边距默认设置设定不1样,在这里设定使清除不一样访问器间的不一样实际效果)*/
}
ul#nav2 li:hover ul{
display:block;
}
ul#nav2 li li:hover {
background-color:#f4f4f4;
}
/*CSS中容许将悬停款式用在全部元素中,而IE只运作运用在联接上,
可是,csshover.htc文档的唯1功效便是给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;/*使全部目录项宽度统1,160⑶*2⑴*2=152px*/
}
/*IE中display:block不够以使联接a的可点击地区填充全部目录项,但假如给联接设定1个确立的宽度,便可以获得要想的个人行为。针对别的的访问器,只必须将width再次跳回auto让访问器自身自身调剂便可以便可。*/
ul#nav2>li li a {
width:auto;
}
/*子挑选器>对IE6下列不能见,因此IE6不容易去实行它*/

OK~~,到这里不一样访问器的CSS驱动器的往下拉菜单就告1段落了,但是,将会有的盆友会想让子菜单放在别的的部位,而并不是默认设置的1级菜单的下方,也好办:
1.在ul#nav2 li挑选器中加上position:relative;
2.在ul#nav2 li ul 挑选器中加上position:absolute;
3.这样就将1级菜单的各目录项(已相对性精准定位)为任何绝度精准定位的子孙后代元素创建了1个器皿块,即肯定精准定位了的子菜单将以它为精准定位的起止点,根据加上top,left特性精准定位调剂与1级菜单的关联来调剂自身的部位(即间距器皿块左上角的部位偏位量)。