CSS，div后面的菜单

发布于 2024-07-26 16:42:02 字数 11634 浏览 8 评论 0原文

大家好，我在使用 IE7 时遇到了问题，我的菜单总是下拉到它所在的 div 后面。

代码：(style.css)

@CHARSET "ISO-8859-1";
body { background: #fff url('images/bg.gif') repeat-x; }

#everything { width: 100%; height: auto; text-align: center; }

#bar { position: relative; float: left; background: #022c3e; width: 100%; height: 10px; }

#container { margin: 0px auto; position: relative; width: 944px; height: auto; background: black; }
#head { width: 100%; height: auto; position: relative; float: left; }
#menu { width: 100%; position: relative; float: left; }
#menu_links { position: relative; float: left; }
#menu_cont { position: relative; float: left; width: 932px; background: url('images/bgmenu.gif') repeat-x; height: 40px; }
#menu_cont ul li { z-index: 97; float: left; margin: 15px 15px 0 15px; font-family: "Arial",sans-serif; font-size: 12px; font-weight: bold; width: 5em; }
#menu_cont ul li a { color: #fff; text-decoration: none; }
#menu_cont ul li ul { margin: 0; padding: 0; position: absolute; width: 5em; left: -999em; }
#menu_cont ul li:hover ul { left: auto; z-index: 111; } 
#menu_cont ul li ul li { display: block; margin: 0; padding: 0; text-align: left; width: 167px; color: #c2cfd9; font-size: 11px; background: #f9fcfe url('images/bullet.png') no-repeat center left; height: 22px; border-right: 1px #000 solid; border-left: 1px #000 solid; }
#menu_cont ul li ul .last { border-bottom: 1px #000 solid; }
#menu_cont ul li ul .cross { background: #f5f9fc url('images/bullet.png') no-repeat center left; }
#menu_cont ul li ul li a { color: #c2cfd9; display: block; padding: 5px 0 0 22px; }
#menu_rechts { position: relative; float: right; }
#main { width: 100%; float: left; position: relative; background: #fff; }
#links { width: 283px; position: relative; float: left; margin: 25px 0 0 0; }
.button { width: 259px; position: relative; margin: 0 auto; background: url('images/button.gif') no-repeat; height: 40px; }
.button p { padding: 15px 0 0 0; color: #718d99; font-family: "Verdana",sans-serif; font-size: 12px; font-weight: bold; }
.informatie { padding: 13px; color: #6f8ca2; font-size: 11px; font-family: "Tahoma",sans-serif; text-align: left; line-height: 18px; }

#midden { width: 636px; background: #f5f9fc; position: relative; float: right; margin: 25px 0 0 25px; }
#lijnboven { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-x top; }
#lijnonder { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-x bottom; }
#lijnlinks { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-y left; }
#lijnrechts { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-y right; }
#hoeklinksboven { position: relative; float: left; width: 100%; background: url('images/linksboven.gif') no-repeat top left; }
#hoekrechtsboven { position: relative; float: left; width: 100%; background: url('images/rechtsboven.gif') no-repeat top right;}
#hoekrechtsonder { position: relative; float: left; width: 100%; background: url('images/rechtsonder.gif') no-repeat bottom right;}
#hoeklinksonder { position: relative; float: left; width: 100%; background: url('images/linksonder.gif') no-repeat bottom left;}
#content { width: 100%; float: left; position: relative; }
h1 { border-bottom: 1px #dfe8ed dotted; font-family: "Verdana",sans-serif; font-size: 12px; color: #71909d; text-align: left; padding: 5px; }
#content p { font-family: "Tahoma",sans-serif; font-size: 11px; color: #02364c; }
#content .text { text-align: left; padding: 0 0 0 25px; margin: 0 0 15px 0; }
#footer { position: relative; float: left; width: 100%; height: 98px; background: url('images/footer.gif') repeat-x; }
#footer p { margin: 65px 0 0 0; color: #476e80; font-family: "Tahoma",sans-serif; font-size: 11px; }

html 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <link rel="stylesheet" href="stijl.css" type="text/css" />
    <title>The dons customs</title>
    <script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <!--[if lte IE 8]>
    <style type="text/css">
        body { behavior:url("csshover.htc"); }
        #menu_cont { z-index: 2; }
        #menu_cont ul li ul { position: relative; z-index: 101; }
        #menu_cont ul li:hover { z-index: 99; visibility: visible; position: relative; }
        #menu_cont ul li { z-index: 99; }
        #menu_cont ul li ul { display: block; margin: 0 0 0 -40px; }
    </style>
<![endif]-->
</head>
<body>
<div id="everything">
    <div id="bar"></div>
    <div id="container">
        <div id="head"><img src="images/head.jpg" alt="The dons customs header" /></div>
        <div id="menu">
            <div id="menu_links"><img src="images/menu_links.png" alt="Menu links" /></div>
            <div id="menu_cont">
                <ul id="nav">
                    <li><a href="#">Button</a></li>
                    <li><a href="#">Button</a>
                        <ul>
                            <li><a href="#">item 1</a></li>
                            <li class="cross"><a href="#">item 2</a></li>
                            <li class="last"><a href="#">item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Button</a></li><li><a href="#">Button</a></li>
                    <li><a href="#">Button</a></li><li><a href="#">Button</a></li>
                </ul>
            </div>
            <div id="menu_rechts"><img src="images/menu_rechts.png" alt="Menu rechts" /></div>
        </div>
        <div id="main">
            <div id="links">
                <div id="flashcontent">
                        <script type="text/javascript" src="flash.js"></script>
                </div>
                <div class="button">
                    <p>Bedrijfsinformatie</p>
                </div>
                <div class="info">
                    <p class="informatie">
                        <strong>Cms name</strong>
                        <br /><br />
                        Contact persoon:    Directeur Kuiper<br />
                        Adres:            Rijksweg 100 <br />
                        Postcode/Plaats:    3453 AA Amsterdam<br />
                        Telefoon:        06 123412341<br />
                        <br />
                        KVK nummer:         012343124 <br /> 
                        BTW: NL 738593843B01
                    </p>
                </div>

            </div>
            <div id="midden">
                <div id="lijnboven">
                    <div id="lijnonder">
                        <div id="lijnlinks">
                            <div id="lijnrechts">
                                <div id="hoeklinksboven">
                                    <div id="hoekrechtsboven">
                                        <div id="hoekrechtsonder">
                                            <div id="hoeklinksonder">
                                                <div id="content">
                                                    <h1>Home</h1>
                                                        <br />
                                                    <p><img src="images/banner.jpg" alt="Banner auto's" /></p>
                                                    <p><br /></p>
                                                        <p class="text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. </p>

                                                        <p class="text">Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>

                                                        <p class="text">Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</p>
                                                    <br />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <p>&copy; <strong>The Don's Customs</strong> | Alle rechten voorbehouden | Algemene voorwaarden</p>
    </div>
</div>
</body>
</html>

提前致谢！

原文

Hey guys, I'm having a problem with IE7, my menu always drops down behind the div where it's in.

The code: (style.css)

@CHARSET "ISO-8859-1";
body { background: #fff url('images/bg.gif') repeat-x; }

#everything { width: 100%; height: auto; text-align: center; }

#bar { position: relative; float: left; background: #022c3e; width: 100%; height: 10px; }

#container { margin: 0px auto; position: relative; width: 944px; height: auto; background: black; }
#head { width: 100%; height: auto; position: relative; float: left; }
#menu { width: 100%; position: relative; float: left; }
#menu_links { position: relative; float: left; }
#menu_cont { position: relative; float: left; width: 932px; background: url('images/bgmenu.gif') repeat-x; height: 40px; }
#menu_cont ul li { z-index: 97; float: left; margin: 15px 15px 0 15px; font-family: "Arial",sans-serif; font-size: 12px; font-weight: bold; width: 5em; }
#menu_cont ul li a { color: #fff; text-decoration: none; }
#menu_cont ul li ul { margin: 0; padding: 0; position: absolute; width: 5em; left: -999em; }
#menu_cont ul li:hover ul { left: auto; z-index: 111; } 
#menu_cont ul li ul li { display: block; margin: 0; padding: 0; text-align: left; width: 167px; color: #c2cfd9; font-size: 11px; background: #f9fcfe url('images/bullet.png') no-repeat center left; height: 22px; border-right: 1px #000 solid; border-left: 1px #000 solid; }
#menu_cont ul li ul .last { border-bottom: 1px #000 solid; }
#menu_cont ul li ul .cross { background: #f5f9fc url('images/bullet.png') no-repeat center left; }
#menu_cont ul li ul li a { color: #c2cfd9; display: block; padding: 5px 0 0 22px; }
#menu_rechts { position: relative; float: right; }
#main { width: 100%; float: left; position: relative; background: #fff; }
#links { width: 283px; position: relative; float: left; margin: 25px 0 0 0; }
.button { width: 259px; position: relative; margin: 0 auto; background: url('images/button.gif') no-repeat; height: 40px; }
.button p { padding: 15px 0 0 0; color: #718d99; font-family: "Verdana",sans-serif; font-size: 12px; font-weight: bold; }
.informatie { padding: 13px; color: #6f8ca2; font-size: 11px; font-family: "Tahoma",sans-serif; text-align: left; line-height: 18px; }

#midden { width: 636px; background: #f5f9fc; position: relative; float: right; margin: 25px 0 0 25px; }
#lijnboven { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-x top; }
#lijnonder { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-x bottom; }
#lijnlinks { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-y left; }
#lijnrechts { position: relative; float: left; width: 100%; background: url('images/border.gif') repeat-y right; }
#hoeklinksboven { position: relative; float: left; width: 100%; background: url('images/linksboven.gif') no-repeat top left; }
#hoekrechtsboven { position: relative; float: left; width: 100%; background: url('images/rechtsboven.gif') no-repeat top right;}
#hoekrechtsonder { position: relative; float: left; width: 100%; background: url('images/rechtsonder.gif') no-repeat bottom right;}
#hoeklinksonder { position: relative; float: left; width: 100%; background: url('images/linksonder.gif') no-repeat bottom left;}
#content { width: 100%; float: left; position: relative; }
h1 { border-bottom: 1px #dfe8ed dotted; font-family: "Verdana",sans-serif; font-size: 12px; color: #71909d; text-align: left; padding: 5px; }
#content p { font-family: "Tahoma",sans-serif; font-size: 11px; color: #02364c; }
#content .text { text-align: left; padding: 0 0 0 25px; margin: 0 0 15px 0; }
#footer { position: relative; float: left; width: 100%; height: 98px; background: url('images/footer.gif') repeat-x; }
#footer p { margin: 65px 0 0 0; color: #476e80; font-family: "Tahoma",sans-serif; font-size: 11px; }

The html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <link rel="stylesheet" href="stijl.css" type="text/css" />
    <title>The dons customs</title>
    <script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <!--[if lte IE 8]>
    <style type="text/css">
        body { behavior:url("csshover.htc"); }
        #menu_cont { z-index: 2; }
        #menu_cont ul li ul { position: relative; z-index: 101; }
        #menu_cont ul li:hover { z-index: 99; visibility: visible; position: relative; }
        #menu_cont ul li { z-index: 99; }
        #menu_cont ul li ul { display: block; margin: 0 0 0 -40px; }
    </style>
<![endif]-->
</head>
<body>
<div id="everything">
    <div id="bar"></div>
    <div id="container">
        <div id="head"><img src="images/head.jpg" alt="The dons customs header" /></div>
        <div id="menu">
            <div id="menu_links"><img src="images/menu_links.png" alt="Menu links" /></div>
            <div id="menu_cont">
                <ul id="nav">
                    <li><a href="#">Button</a></li>
                    <li><a href="#">Button</a>
                        <ul>
                            <li><a href="#">item 1</a></li>
                            <li class="cross"><a href="#">item 2</a></li>
                            <li class="last"><a href="#">item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Button</a></li><li><a href="#">Button</a></li>
                    <li><a href="#">Button</a></li><li><a href="#">Button</a></li>
                </ul>
            </div>
            <div id="menu_rechts"><img src="images/menu_rechts.png" alt="Menu rechts" /></div>
        </div>
        <div id="main">
            <div id="links">
                <div id="flashcontent">
                        <script type="text/javascript" src="flash.js"></script>
                </div>
                <div class="button">
                    <p>Bedrijfsinformatie</p>
                </div>
                <div class="info">
                    <p class="informatie">
                        <strong>Cms name</strong>
                        <br /><br />
                        Contact persoon:    Directeur Kuiper<br />
                        Adres:            Rijksweg 100 <br />
                        Postcode/Plaats:    3453 AA Amsterdam<br />
                        Telefoon:        06 123412341<br />
                        <br />
                        KVK nummer:         012343124 <br /> 
                        BTW: NL 738593843B01
                    </p>
                </div>

            </div>
            <div id="midden">
                <div id="lijnboven">
                    <div id="lijnonder">
                        <div id="lijnlinks">
                            <div id="lijnrechts">
                                <div id="hoeklinksboven">
                                    <div id="hoekrechtsboven">
                                        <div id="hoekrechtsonder">
                                            <div id="hoeklinksonder">
                                                <div id="content">
                                                    <h1>Home</h1>
                                                        <br />
                                                    <p><img src="images/banner.jpg" alt="Banner auto's" /></p>
                                                    <p><br /></p>
                                                        <p class="text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. </p>

                                                        <p class="text">Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>

                                                        <p class="text">Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</p>
                                                    <br />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <p>© <strong>The Don's Customs</strong> | Alle rechten voorbehouden | Algemene voorwaarden</p>
    </div>
</div>
</body>
</html>

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纵山崖 2024-08-02 16:42:02

改成

#main { width: 100%; float: left; position: relative; background: #fff; }

：

#main { width: 100%; background: #fff; }

change:

#main { width: 100%; float: left; position: relative; background: #fff; }

to:

#main { width: 100%; background: #fff; }

回复收藏 0 原文

赢得她心 2024-08-02 16:42:02

这里的代码太多了:)

通常当涉及到下拉菜单时，我使用 Chrome 菜单。这真的很好，节省了我很多时间。

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Tooo much code here :)

Usually when it comes to dropdown menus I use Chrome Menu. It's really good and saved me a lot of time.

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

回复收藏 0 原文

西瑶 2024-08-02 16:42:02

在制作这些东西时，我通常只使用一些固定的 CSS 模板。

对于您的情况，您可能会发现此网站很有帮助。它建议 IE 使用此代码片段（显然不完全适合您的代码）。

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->

祝你好运。

When making these kinds of things I often just use some fixed CSS template.

In your case you may find this site helpful. It suggests this snippet (obviously not exactly fitted for your code) for IE.

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->

Good luck.

回复收藏 0 原文

~没有更多了~