个人中心
gpt4 book ai didi

html - 显示在另一个 div 后面的子菜单

转载 作者：太空宇宙 更新时间：2023-11-04 15:02:59 24 4
gpt4 key购买 nike

我有一个 CSS 菜单，它有一个下拉部分来显示子菜单。子菜单在 IE8 中显示在另一个 DIV 后面。在 IE9、Chrome、FF 和 Safari 中显示正确。

我该如何纠正这个问题？

非常感谢。

<!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>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
    @charset "utf-8";
        body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #000000;
        no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-color: #09F;
        background-repeat: no-repeat;
        }
        p {
        margin:0
        }
        .darrobric #white-header-bg {
        position: relative; 
        width: 100%;
        margin: 0 auto; 
        border: 0px solid #000000;
        text-align: left;
        background: #ffffff;
        height: 100px;
        }
        .darrobric #bg {
        position: relative; 
        width: 100%;
        margin: 0 auto; 
        border: 0px solid #000000;
        text-align: left;
    }
    .darrobric #header2 {
        height: 100px; 
        background: #ffffff;  
        width: 960px;
        position: relative;
        margin: 0 auto;
    }
    .darrobric #logo {
        position: absolute;
        left: 0;
        width: 240px;
    }
    .darrobric #nav {
        position: absolute;
        top: 31px;
        right: -5px;
        width: 730px;
        background: #ffffff;
        font-size: 14.5px;
        font-family: Arial, Helvetica, sans-serif;
        color: #0059a2;
        font-weight: bold;
        text-align: right;
        margin-right: 5px;
    }
    .darrobric #buttons {
        position: absolute;
        right: 0px;
        width: 300px; 
        background: #ffffff;
        font-size: 14.5px;
        font-family: Arial, Helvetica, sans-serif;
        color: #0059a2;
        font-weight: bold;
        text-align: right;
        top: 10px;
    }
    .darrobric #slider-container {
        height: 332px;
        background: #00569c;
        padding: 0;  
        margin-bottom: 25px;
    }
    .darrobric #container {
        position: relative;
        width: 960px;
        margin: 30px auto;
        border: 0px solid #000000;
        text-align: left;
        height: 100%;
    } 
    .darrobric #slider-bg {
        background-image: url(trans.png);
        padding: 10px 10px 10px 10px;
        margin-bottom: 25px;
        height: 333px;
        position: static;
    } 
    .darrobric #map-container {
        padding: 0;
        margin-bottom: 25px;
        width: 608px;
    }
    .darrobric #mainContent { 
        margin: 0 200px; 
        padding: 0 10px; 
    }
    .darrobric #box-text {
        padding: 0px;
        width: 260px;
        line-height: 18px;
    }
    .darrobric #box-image {
        padding: 0px;
        width: 150px;
        right: 0px;
        margin-top: -150px;
        margin-left: 270px;
        height: 150px;
    }
    .darrobric #footer-small-logo {
        padding: 0px 0px 0px 840px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #565656;
        height: 35px;
        line-height: 40px;
        margin-top: -45px;
    }
    .darrobric #SLIDESTEXT{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #FFF;
        margin-left: 665px;
        margin-top: -305px;
        margin-right: 20px;
        line-height: 22px;
    }
    .darrobric #BUTTON {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #FFF;
        margin-left: 665px;
        margin-top: 25px;
        margin-right: 20px;
        line-height: 22px;
    }

    .fltrt { 
        float: right;
        margin-left: 8px;
    }
    .fltlft { 
        float: left;
        margin-right: 8px;
    }
    .one {
        overflow:hidden;
        height:100%;
        float: left;
        width: 960px;
    }
    /* horizontal menus */
    #nav, .nav, #nav .nav li {
        margin:0px;
        padding:0px;
        z-index: 5000;
    }
    #nav li {
        float:right;
        display:inline;
        cursor:pointer;
        list-style:none;
        padding:5px 18px 5px 0px;
        border:0px #000 solid;
        position:relative;
        z-index: 1000;
        background-color: #FFF;
    }
    #nav li ul.first {
    left:-1px; 
    top:100%;
    }
    li, li a {
        color:#00569C;
        text-decoration:none;
        text-align: left;
    }
    #nav .nav li {
        width:100%;
        text-indent:10px;
        line-height:30px;
        margin-right:10px;
        border-top:0px #000 solid;
        border-bottom:0px #000 solid;
        border-left:none;
        border-right:none;
        onclick="return true"
    ;
        background-color: #FFF;
    }
    #nav li a {
    display:block; 
    width:inherit; 
    height:inherit;
    }
    ul.nav { 
    display:none; 
    }
    #nav li:hover > a, #nav li:hover {
        color:#00569C;
    }
    li:hover > .nav {
        display:block;
        position:absolute;
        width:200px;
        top:-2px;
        left:30%;
        z-index:1000;
        border:0px #000 solid;
    }
    li:hover {
        position:relative;
        z-index:2000;
    }

    #basic li {
    color:#000;
    }
    </style>
  </head>
  <body class="darrobric">
    <div id="white-header-bg">
      <div id="header2">
        <div id="logo"></div>
        <div id="nav">
          <ul id="nav">
            <li>Heading 5</li>
            <li>
              <a href="#">Heading 4</a>
              <ul class="nav first">
                <li>
                  <a href="our-locations.html">111</a>
                </li>
                <li>
                  <a href="career-paths.html">222</a>
                </li>
                <li>
                  <a href="#">333</a>
                </li>
                <li>
                  <a href="#">444</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="companies-and-brands.html">Heading 3</a>
            </li>
            <li>
              <a href="latest-news.html">Heading 2</a>
            </li>
            <li>
              <a href="#">Heading 1</a>
              <ul class="nav first">
                <li>
                  <a href="introducing-Lactalis.html">555</a>
                </li>
                <li>
                  <a href="our-history.html">666</a>
                </li>
                <li>
                  <a href="companies-and-brands.html">777</a>
                </li>
                <li>
                  <a href="our-locations.html">888</a>
                </li>
                <li>
                  <a href="http://www.youtube.com">999</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="container">
      <div class="one">
        <div id="slider-bg">
          <div id="slider-container">
            <IMG name="SLIDESIMG" src="blank.png" width="640"
            height="332" alt="Slideshow image">
              <DIV ID="SLIDESTEXT" STYLE="position: relative;">Elit
              praesent fringilla viverra is sapien vel vehicula
              curabiturin lectus sem, nec eleifend est. Aliquam
              erat ion volutpat aliquam et lorem libero, non
              fringillbh ipsum dolor sit amet consectetuer
              adipiscing elit, sed diam nonummy nibhen euismod
              tincidunt ut laoreet dolore sed diam nonummy
              nibhen.</DIV>
            </IMG>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

最佳答案

对于 IE，主要的顶级 div 元素需要具有比它位于其上的元素或您尝试放置的元素更高的 z-index在它上面会隐藏在下面。如果这有意义的话。

您需要将此添加到您的代码中:

#container{
    z-index:10;
    position:relative;
}
#white-header-bg{
    z-index:11;
    position:relative;
}

我还注意到您在一些地方有导航 ID。 ID 只能使用一次，例如 id="nav" 但是 class="nav" 可以多次使用

关于html - 显示在另一个 div 后面的子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16239158/

24 4 0
文章推荐： css - Chrome 字体颜色 'clipping'
文章推荐： javascript - 检查所有复选框，如果它们具有相同的值
文章推荐： javascript - 可以使 Kinetic.js 使用 css 值吗
文章推荐： c++ - 非静态数据成员初始值设定项 C++
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com