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

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

WBOY

Libérer： 2016-06-21 09:44:19

original

915 Les gens l'ont consulté

CSS HTML

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        *        {            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 src="../Contents/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(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></head><body>    <div id="container">        <div id="body-head">            <div class="logo">                nihao            </div>            <div class="navBox">                <ul>                    <li><a href="#">首页</a></li>                    <li><a href="#">关于品牌</a>                        <div class="menu">                            <span><a href="#">品牌介绍</a></span> <span><a href="#">目标愿景</a></span> <span><a href="#">                                管理层（董事长、产品总监、品牌总监)</a></span>                        </div>                    </li>                    <li><a href="#">最新动态</a>                        <div class="menu">                            <span><a href="#">公司新闻</a></span> <span><a href="#">行业动态</a></span>                        </div>                    </li>                    <li><a href="#">彩宝欣赏</a>                        <div class="menu">                            <span><a href="#">宝石</a></span> <span><a href="#">钻石</a></span>                        </div>                    </li>                    <li><a href="#">珠宝首饰</a>                        <div class="menu">                            <span><a href="#">戒指</a></span> <span><a href="#">挂件</a></span> <span><a href="#">项链</a></span>                            <span><a href="#">手链/手镯</a></span> <span><a href="#">耳坠</a></span>                        </div>                    </li>                    <li><a href="#">珠宝课堂</a>                        <div class="menu">                            <span><a href="#">img</a></span>                        </div>                    </li>                    <li><a href="#">品牌合作</a>                        <div class="menu">                            <span><a href="#">产品供应</a></span> <span><a href="#">品牌加盟</a></span>                        </div>                    </li>                </ul>            </div>        </div>        <div id="body-main">            <div class="img-list">               <!-- <img src="../Contents/Images/home_azuma.jpg" title="" alt="" />-->            </div>        </div>        <div id="body-bottom">        </div>    </div></body></html>

Copier après la connexion

回复讨论(解决方案)

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下不兼容！上图
但是在火狐下行，上图

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        *        {            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 src="../Contents/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(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></head><body>    <div id="container">        <div id="body-head">            <div class="logo">                nihao            </div>            <div class="navBox">                <ul>                    <li><a href="#">首页</a></li>                    <li><a href="#">关于品牌</a>                        <div class="menu">                            <span><a href="#">品牌介绍</a></span> <span><a href="#">目标愿景</a></span> <span><a href="#">                                管理层（董事长、产品总监、品牌总监)</a></span>                        </div>                    </li>                    <li><a href="#">最新动态</a>                        <div class="menu">                            <span><a href="#">公司新闻</a></span> <span><a href="#">行业动态</a></span>                        </div>                    </li>                    <li><a href="#">彩宝欣赏</a>                        <div class="menu">                            <span><a href="#">宝石</a></span> <span><a href="#">钻石</a></span>                        </div>                    </li>                    <li><a href="#">珠宝首饰</a>                        <div class="menu">                            <span><a href="#">戒指</a></span> <span><a href="#">挂件</a></span> <span><a href="#">项链</a></span>                            <span><a href="#">手链/手镯</a></span> <span><a href="#">耳坠</a></span>                        </div>                    </li>                    <li><a href="#">珠宝课堂</a>                        <div class="menu">                            <span><a href="#">img</a></span>                        </div>                    </li>                    <li><a href="#">品牌合作</a>                        <div class="menu">                            <span><a href="#">产品供应</a></span> <span><a href="#">品牌加盟</a></span>                        </div>                    </li>                </ul>            </div>        </div>        <div id="body-main">            <div class="img-list">               <!-- <img src="../Contents/Images/home_azuma.jpg" title="" alt="" />-->            </div>        </div>        <div id="body-bottom">        </div>    </div></body></html>

Copier après la connexion

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

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