下拉列表在ie6下不显示_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:32 AM

.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;
}

- - 2012年
  - 2011年
    - 周杰
    - 张薇
    - 易贞桢
    - 夏荣丽
    - 苏春燕
    - 沈满
    - 刘佳
    - 李菁
    - 胡雨佳
    - 陈小平
    - 白盛兰
    - 杨姝红
  - 2007-2010

在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就是一个伪类

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn