永发信息网

用CSS 做的下拉菜单 IE下不显示

答案:2  悬赏:30  手机版
解决时间 2021-04-26 22:06
  • 提问者网友:轻浮
  • 2021-04-26 11:37

用纯CSS做了个下拉菜单,在火狐下面,显示正常,但在IE下不显示 ,网上有人说IE6以下,不支持除了a之外的hover伪类,我仿照别人的方案,在<li>内加了a标签,可是还是不行,估计是CSS的问题,我将代码贴出来,请大家,帮我找找原因,谢谢

 

html代码:

<DIV id=div_lnb style="Z-INDEX: 100">
<UL>
<li><a href='#nogo'><span>首页</span></a></li>
<!-- 开始 -->
<li class=menu>
<!--[if lte IE 6]><A
  href="#nogo">
  <TABLE>
    <TBODY>
    <TR>
      <TD><![endif]-->
<span><a href="#nogo" target="_blank">CSS下拉菜单</a></span>

// 当属标移动到这里时,呼叫出隐藏的 <dl> 将此外覆盖
 <dl>
  <dt>CSS下拉菜</dt>
  <dd><a href="#about1">游戏特色</a></dd>
  <dd><a href="#about2">游戏内容</a></dd>
  <dd><a href="#about3">游戏介绍</a></dd>
  <dd><a href="#about4">游戏界面</a></dd>
 </dl><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]-->
</li>
<!-- 结束 -->
<li><a href='{dede:global.cfg_cmsurl/}/'><span>其它频道</span></a></li>
<li><a href='{dede:global.cfg_cmsurl/}/'><span>其它频道</span></a></li>
<li><a href='{dede:global.cfg_cmsurl/}/'><span>其它频道</span></a></li>
<li><a href='{dede:global.cfg_cmsurl/}/'><span>其它频道</span></a></li>
  </UL></DIV>

 

 

CSS代码:

 

 

#div_lnb {
 Z-INDEX: 2; BACKGROUND: url(/ima/lnb.gif) no-repeat; MARGIN: 0px 0px 10px; POSITION: relative
}
#div_lnb UL {
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 110px;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 WIDTH: 800px;
 PADDING-TOP: 0px;
 LIST-STYLE-TYPE: none;
 height: 48px;
}
#div_lnb UL LI {
 FLOAT: left;
 WIDTH: 107px;
 text-align: center;
 padding-top: 10px;
 margin-top: 5px;
 height: 25px;
}

#div_lnb UL LI span {
 color: #FFFFFF;
 font-size: 14px;
 font-weight: bold;
}
#div_lnb UL LI A {
 DISPLAY: block; WIDTH: 107px;
}

#div_lnb ul .menu {
}
#div_lnb ul .menu span a {
 display: block;
 text-decoration: none;
 color: #FFFFFF;
 font-size: 14px;
 font-weight: bold;
 height: 25px;
}
#div_lnb ul .menu dl {
 display: none;
 height: 150px;
 width: 107px;
 left: 217px;
 top: 4px;
 position: absolute;
 padding-bottom: 10px;
 background-image: url(../ima/lnb2.gif);
 background-repeat: no-repeat;
 background-position: 0px 0px;
}
#div_lnb ul li:hover dl {
 display: block;
}
#div_lnb ul .menu a:hover dl {
 display: block;
}

#div_lnb ul .menu a table {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -1px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}

#div_lnb ul .menu dl dt {
 display: block;
 height: 28px;
 font-weight: bold;
 font-size: 14px;
 line-height: 30px;
 color: #FFFFFF;
 padding-top: 4px;
}
#div_lnb ul .menu dl dd a {
 display: block;
 overflow: hidden;
 height: 29px;
 font-weight: normal;
 font-size: 13px;
 line-height: 30px;
 color: #FFFFFF;
}
#div_lnb ul .menu dl dd a:hover {
 font-size: 13px;
 color: #FF0033;
}
-->

 

 

最佳答案
  • 五星知识达人网友:猎心人
  • 2021-04-26 13:02
IE兼容性问题。楼主IE6下测试的?
全部回答
  • 1楼网友:不如潦草
  • 2021-04-26 13:42

你那个IE6 HACK不如不做   另外建议你使用JS吧   说实话我对IE已经绝望了

我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯