下拉菜单问题（css兼容）求大神指导！！！_html/css_WEB-ITnose

2016-06-21 09:44 990浏览原创

CSS HTML

做了个下拉菜单IE7下不兼容！上图
但是在火狐下行，上图

我要火狐这种效果谁能给我改改？

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <title></title>    <style>        *        {            margin: 0;            padding: 0;            list-style-type: none;            text-decoration: none;            font:bold 15px 黑体;            background-color:Black;            color:#B8860B;        }                #body-head        {            width: 100%;            height: 120px; border:1px solid red;        }        .logo        {            width: 200px;            height: 70px;            text-align: center;            line-height: 60px;            margin: 0px auto;            border:1px solid red;        }        .navBox        {            margin-top: 10px;            text-align: center;            height: 35px;            line-height: 35px; border:1px solid red;        }        .navBox ul        {            width: 980px;            margin: auto;            overflow: hidden;        }        .navBox ul li        {            border:1px solid red;            display: inline;            height:35px;            padding: 10px 20px;                  }        .navBox ul li a        {            text-decoration: none;        }        .menu        {            display: none;            position: absolute;            width: 980px;            background-color: White;            height: 120px;                    }        #body-main        {            width: 100%;            height: 600px;        }        .img-list        {            text-align: center;            margin: 0 auto;        }        #body-bottom        {            width: 100%;            height: 100px;        }    </style>    <script></script>    <script>        $(function () {            var currentColor = $(".navBox ul li").css("background");            $(".navBox ul li").mouseover(function () { $(this).children("div").show(); $(this).css("background", "White"); });            $(".navBox ul li").mouseout(function () { $(this).children("div").hide(); $(this).css("background", "Black"); });        });    </script>    <div>        <div>            <div>                nihao            </div>            <div>                <ul>                    <li><a>首页</a></li>                    <li>
<a>关于品牌</a>                        <div>                            <span><a>品牌介绍</a></span> <span><a>目标愿景</a></span> <span><a>                                管理层（董事长、产品总监、品牌总监)</a></span>                        </div>                    </li>                    <li>
<a>最新动态</a>                        <div>                            <span><a>公司新闻</a></span> <span><a>行业动态</a></span>                        </div>                    </li>                    <li>
<a>彩宝欣赏</a>                        <div>                            <span><a>宝石</a></span> <span><a>钻石</a></span>                        </div>                    </li>                    <li>
<a>珠宝首饰</a>                        <div>                            <span><a>戒指</a></span> <span><a>挂件</a></span> <span><a>项链</a></span>                            <span><a>手链/手镯</a></span> <span><a>耳坠</a></span>                        </div>                    </li>                    <li>
<a>珠宝课堂</a>                        <div>                            <span><a>img</a></span>                        </div>                    </li>                    <li>
<a>品牌合作</a>                        <div>                            <span><a>产品供应</a></span> <span><a>品牌加盟</a></span>                        </div>                    </li>                </ul>            </div>        </div>        <div>            <div>               <!-- @@##@@-->            </div>        </div>        <div>        </div>    </div>

回复讨论(解决方案)

IE就是一怪胎

应该简单

只要在.navBox
里加上position:relative;这样的一句话

然后再.menu 里加上
left:0px;
top:45px;就可以了把

上面的还有点问题，不要上面
应该是
改ul里的
也就是

.navBox ul
        {
            width: 980px;
            margin: auto;
          position:relative;
        }

加position:relative;

然后在.menu 里加上

left:0px;
top:16px;
就可以了

做了个下拉菜单IE7下不兼容！上图
但是在火狐下行，上图

我要火狐这种效果谁能给我改改？

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <title></title>    <style>        *        {            margin: 0;            padding: 0;            list-style-type: none;            text-decoration: none;            font:bold 15px 黑体;            background-color:Black;            color:#B8860B;        }                #body-head        {            width: 100%;            height: 120px; border:1px solid red;        }        .logo        {            width: 200px;            height: 70px;            text-align: center;            line-height: 60px;            margin: 0px auto;            border:1px solid red;        }        .navBox        {            margin-top: 10px;            text-align: center;            height: 35px;            line-height: 35px; border:1px solid red;        }        .navBox ul        {            width: 980px;            margin: auto;            overflow: hidden;        }        .navBox ul li        {            border:1px solid red;            display: inline;            height:35px;            padding: 10px 20px;                  }        .navBox ul li a        {            text-decoration: none;        }        .menu        {            display: none;            position: absolute;            width: 980px;            background-color: White;            height: 120px;                    }        #body-main        {            width: 100%;            height: 600px;        }        .img-list        {            text-align: center;            margin: 0 auto;        }        #body-bottom        {            width: 100%;            height: 100px;        }    </style>    <script></script>    <script>        $(function () {            var currentColor = $(".navBox ul li").css("background");            $(".navBox ul li").mouseover(function () { $(this).children("div").show(); $(this).css("background", "White"); });            $(".navBox ul li").mouseout(function () { $(this).children("div").hide(); $(this).css("background", "Black"); });        });    </script>    <div>        <div>            <div>                nihao            </div>            <div>                <ul>                    <li><a>首页</a></li>                    <li>
<a>关于品牌</a>                        <div>                            <span><a>品牌介绍</a></span> <span><a>目标愿景</a></span> <span><a>                                管理层（董事长、产品总监、品牌总监)</a></span>                        </div>                    </li>                    <li>
<a>最新动态</a>                        <div>                            <span><a>公司新闻</a></span> <span><a>行业动态</a></span>                        </div>                    </li>                    <li>
<a>彩宝欣赏</a>                        <div>                            <span><a>宝石</a></span> <span><a>钻石</a></span>                        </div>                    </li>                    <li>
<a>珠宝首饰</a>                        <div>                            <span><a>戒指</a></span> <span><a>挂件</a></span> <span><a>项链</a></span>                            <span><a>手链/手镯</a></span> <span><a>耳坠</a></span>                        </div>                    </li>                    <li>
<a>珠宝课堂</a>                        <div>                            <span><a>img</a></span>                        </div>                    </li>                    <li>
<a>品牌合作</a>                        <div>                            <span><a>产品供应</a></span> <span><a>品牌加盟</a></span>                        </div>                    </li>                </ul>            </div>        </div>        <div>            <div>               <!-- @@##@@-->            </div>        </div>        <div>        </div>    </div>

主要的是还得记得把.navBox ul里的overflow: hidden;删掉哦

把menu里面的 position: absolute;删掉，这个是绝对的，不行的...