产品使用及交流论坛

首页 » 产品使用交流区 » 安装及使用交流 » IE8下,下拉菜单显示不全,请教xiyou哥指点
bysxingyun - 2015/12/16 16:56:26
在IE内核浏览器中,下来显示不全,webkit,火狐 内核浏览器显示正常;实在是 不知其因了,请教xiyou哥帮忙指点一下。

图片如下:
10707

10708

CSS代码如下:
.top_box{clear:both;}
  /*logo在左侧时的顶部样式*/
.top_box .topcontent_box{width:100%;height:24px;border:3px solid #dda400; border-width:3px 0 0 0;background: #ffffff;position:relative;z-index:11;}
.top_box .topcontent_box .topcontent{width:1120px;;margin:0 auto 0 auto; }
.top_box .topcontent_box .topcontent .top-l{float:left;width:50%;text-align:left;line-height:24px;}
.top_box .topcontent_box .topcontent .top-r{float:right;width:50%;text-align:right;}
.top_box .topcontent_box .topcontent .top-r a{float:right;background:url(images/l.jpg) no-repeat right center;padding:0px 10px 0px 10px;line-height:24px;}

.top_box .logo_menu_box {width:100%;height:66px;border:0 solid #f6f6f6;border-width:1px 0 0 0;background:#ffffff;  -ms-filter:" progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=3) "; -moz-box-shadow:0px 1px 2px #aaa;/*firefox*/-webkit-box-shadow:0px 1px 2px 0px #aaaaaa;/*webkit*/ box-shadow:0px 1px 2px 0px #aaa;/*opera或ie9*/position:relative;z-index:10; }
.top_box .logo_menu_box .logo_menu{width:1120px;margin:0 auto 0 auto;text-align:left;}
.top_box .logo_menu_box .logo_menu .logo{float:left;text-align:left;margin: 12px 0 0 0;}
.top_box .logo_menu_box .logo_menu .menu_box_right{float:right;text-align:left;margin:20px 0 0 0;}

.menu_style_homepage{float:left;width:75px;text-align:center;}
.menu_style{float:left;width:75px;margin:0 0 0 20px;text-align:center;}

a.menu{display:block;font-size:14px;font-family:Microsoft Yahei;line-height:30px;}
a.menu:hover{color:#fff;background:#cf000e;}

.menu_current a.menu{color:#fff;background:#cf000e;}

/*banner样式*/
.banner{clear:both; background:#f6f6f6; margin:50px 0 0 0; position:relative; z-index:5;}
.smallbanner{clear:both;padding: 0 0 0 0;margin:0 0 0 0;text-align:left}


*下拉样式*/
#Menu ul li{position:relative;z-index:15}
#Menu ul li ul{position:absolute;left:0;z-index:16;background-color:#cccccc;line-

height:20px;padding:1px 1px 0 1px;display:none;}/*一级样式*/

#Menu ul li ul li{position:relative;width:120px;height:21px;padding:2px 0 0 0;background-

color:#fff;border:0 solid #cccccc;border-width:0 0 1px 0;text-align:center;}/*li行样式*/

#Menu ul li ul li ul{position:absolute;left:120px;top:0px;display:none;}/*二级样式*/

#Menu ul li ul li ul li ul{position:absolute;top:0px;display:none;}/*三级样式*/


#Menu ul li.hover{} /*鼠标经过时栏目li样式*/
#Menu ul li.hover a.menu{background:#cf000e;color:white}
#Menu ul li.hover ul{display:block}
#Menu ul li.hover ul li ul{display:none;}
#Menu ul li ul li.hover ul{display:block;}
#Menu ul li ul li.hover{background-color:#ececec}/*鼠标经过时下拉li样式*/
#Menu ul li ul li.hover ul li ul{display:none}
#Menu ul li ul li ul li.hover ul{display:block;}


#Menu ul li ul a{display:block!important;display:inline;height:30px;text-

align:center;overflow:hidden;}/*默认a样式*/
#Menu ul li ul a:hover{text-decoration:none}/*鼠标经过a样式*/

js如下:
<script type="text/javascript">
    $(function () {
        var ie6 = /msie 6/i.test(navigator.userAgent)
        , dv = $('#fixedMenu'),dv1 = $('div.banner'), st;
        dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
        $(window).scroll(function () {
            st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
            if (st >= parseInt(dv.attr('otop'))) {
                if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果
                    dv.css({ position: 'absolute', top: st });
                }else if (dv.css('position') != 'fixed'){
                     dv.css({ 'position': 'fixed', top: 0 ,'z-index':'14' });dv1.css({'margin': '67px 0 0 0'});}
            }else if (dv.css('position') != 'relative')
              { dv.css({ 'position': 'relative' ,'z-index':'10'});dv1.css({'margin': '0'});}
        });
    });

</script>
bysxingyun - 2015/12/16 22:48:13
问题就在 positiong:relative;z-index;10;上。   .top_box .logo_menu_box {width:100%;height:66px;border:0 solid #f6f6f6;border-width:1px 0 0 0;backgroundffffff;  -ms-filter:" progidXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=3) "; -moz-box-shadow:0px 1px 2px #aaa;/*firefox*/-webkit-box-shadow:0px 1px 2px 0px #aaaaaa;/*webkit*/ box-shadow:0px 1px 2px 0px #aaa;/*opera或ie9*/ position:relative;z-index:10; }

但是不加这个属性的话,阴影效果被 banner所覆盖。  如何解决?有知道的帮忙指点一下
1
查看完整版本: IE8下,下拉菜单显示不全,请教xiyou哥指点