Home >Web Front-end >HTML Tutorial >下拉列表在ie6下不显示_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-21 09:32:531344browse

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn