当前位置:Gxlcms > html代码 > 下拉列表在ie6下不显示_html/css_WEB-ITnose

下拉列表在ie6下不显示_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:29人阅读

.dropdown UL {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: left; PADDING-TOP: 0px;width:149px;
}
.dropdown IMG {
BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px
}
.dropdown LI {
LIST-STYLE-TYPE: none; FLOAT: left;width:149px;
}


UL.dropdown {
WIDTH: 149px;
}
UL.dropdown LI {
LINE-HEIGHT: 44px !important; ZOOM: 1; FLOAT: left; FONT-SIZE: 14px;WIDTH: 149px;
}
UL.dropdown A:link {
COLOR: #fff
}
UL.dropdown A:visited {
COLOR: #fff; TEXT-DECORATION: none
}
UL.dropdown A.hover {
COLOR: #fff
}
UL.dropdown A.active {
COLOR: #fff
}
UL.dropdown LI A {
PADDING-BOTTOM: 4px;PADDING-LEFT: 8px; PADDING-RIGHT: 8px; DISPLAY: block; COLOR: #fff;
}
UL.dropdown LI:unknown A {
BORDER-RIGHT-STYLE: none
}
UL.dropdown LI.hover {
POSITION: relative; COLOR: #fff
}
UL.dropdown LI:hover {
POSITION: relative; COLOR: #fff
}
UL.dropdown LI.hover A {
COLOR: #fff
}
UL.dropdown UL {
BORDER-BOTTOM: #fff 2px solid; POSITION: absolute; BORDER-LEFT: #fff 2px solid; WIDTH: 149px; VISIBILITY: hidden; BORDER-TOP: #fff 2px solid; TOP: 100%; BORDER-RIGHT: #fff 2px solid; LEFT: 0px;DISPLAY: block;
}
UL.dropdown UL LI {
LINE-HEIGHT: 20px !important; WIDTH: 149px; BACKGROUND: #000000; FLOAT: none; HEIGHT: 25px !important; FONT-SIZE: 12px; FONT-WEIGHT: normal;DISPLAY: block;
}
UL.dropdown UL LI A {
BORDER-RIGHT-STYLE: none; WIDTH: 133px;
}
UL.dropdown UL LI A.hover {
BACKGROUND-COLOR: #e8edaa; COLOR: #b53240
}
UL.dropdown UL UL {
TOP: 0px; LEFT: 100%;width:149px;DISPLAY: block;
}
UL.dropdown LI:hover > UL {
VISIBILITY: visible;DISPLAY: block;
}























在ie6、火狐、谷歌下面都不显示 谁帮忙解决下


回复讨论(解决方案)


你把这里的样式去掉试试


去掉也不行的

可以参考这个
http://www.lwis.net/free-css-drop-down-menu/

继续等待

不知道你想弄成什么效果

就简单的显示下拉列表就行了

ie6-不支持 li:hover,找个js来实现吧

同意楼上

你是想要 鼠标放上去显示下拉列表对吧。看看下面的是不是你要的。





  • 飞蛾无法



    • 分为俄方

    • 分为俄方





  • 分为俄方


  • 分为俄方



    • 分为俄方

    • 分为俄方

    • 分为俄方




  • 分为俄方

  • 分为俄方





#topnavall, #topnav, #topnav ul, #topnav ul li, #topnav ul li a { overflow:visible; }
#topnavall { float:left; width:900px; padding-top:200px; }
#topnav { width:900px; height:20px; background:#f7f7f7; }
#topnav ul ul { visibility:hidden; height:auto; position:absolute; background:#FFF; padding:0; margin:0; filter:alpha(opacity=90); -moz-opacity:0.9;opacity:0.9; }
#topnav ul ul { width:120px; left:0; top:20px; line-height:normal; }
#topnav li { position:relative; z-index:500; float:left; display:block; height:20px; line-height:20px; padding:0 10px; }
#topnav table { _margin-top:-5px; }
#topnav ul li a { _overflow:hidden; display:inline-block; height:20px; line-height:20px; }
#topnav ul li a:hover { border-bottom: solid 0px #000; overflow:visible; }
#topnav li:hover ul, #topnav a:hover ul { visibility:visible; line-height:normal; }
#topnav ul li ul li { width:auto; float:none; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }
#topnav ul li ul li a { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #fafafa; border-bottom-color:#eee; border-top-color:#fafafa; background:#f3f3f3; }
#topnav ul li ul li a:hover { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #F90; border-bottom-color:#eee; border-top-color:#fafafa; background:#eee; }

问题就出在ie6只支持a的伪操作:hover,不支持其他的,包括li,所以建议加段jquery,或者采取别的办法使得ie6支持那个伪操作,

jq怎么写, 伪操作是怎么做的

jQuery就比较简单
$(".menu>ul>li").hover(function(){
.....//鼠标放上去的行为(可以给子菜单增加个显示的样式)
},function(){
.....//鼠标离开后的行为(删除鼠标放上去给子菜单增加的哪个样式)
})

或者也可以用原始javascript去弄,前提要判断一下是否能检测到这个menu样式层,

:hover就是一个伪类

可以自己随便先做个小实验。

人气教程排行