Maison >interface Web >tutoriel HTML >下拉列表在ie6下不显示_html/css_WEB-ITnose

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

WBOY
WBOYoriginal
2016-06-21 09:32:531338parcourir

.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下不显示_html/css_WEB-ITnose

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

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

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

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

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

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

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

  •                         

  •                             

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

            
      • 2012年
                

                      
                  

            

      •     
      • 2011年
                

                      
                              
        • 周杰

        •                 
                              
        • 张薇

        •                 
                              
        • 易贞桢

        •                 
                              
        • 夏荣丽

        •                 
                              
        • 苏春燕

        •                 
                              
        • 沈满

        •                 
                              
        • 刘佳

        •                 
                              
        • 李菁

        •                 
                              
        • 胡雨佳

        •                 
                              
        • 陈小平

        •                 
                              
        • 白盛兰

        •                 
                              
        • 杨姝红

        •                 
                  

            

      •     
      • 2007-2010
                

                      
                  

            


                                          

    •                                 

                                
                                
                            

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

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

  •                     

                
 


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

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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn