Question

我有一个下拉菜单（#dropDownMenu），当我的网站的“#headerNav”悬停时出现。如果我将#dropDownMenu（最初用display：none隐藏，直到链接悬停在上面）稍微超过#headerNav div，它才能正常工作。

这样可以防止光标在出现时没有足够快地移动到下拉菜单时引起的轻微闪烁。通过#headerNav稍微重叠#dropDownMenu，这使得当光标实际位于#dropDownMenu时，#headerNav似乎仍在盘旋。

无论如何，我现在想隐藏#dropDownMenu在标题或#headerContent后面的重叠部分，所以一切看起来都比较整洁，所以下拉菜单实际上看起来好像出现在#headerNav下面。

我尝试过不同的z-index设置，但似乎都没有工作，这很烦人。当我将#headerNav：hover #dropDownMenu的z-index设置为-1时，它会按预期隐藏在所有内容后面。

如果我将header或#headerContent的z-index设置为高于“#headerNav：hover #dropDownMenu”的数字，则将鼠标悬停在#headerNav上没有区别。我仍然可以看到#dropDownMenu重叠。

CSS：

header {

    position:fixed; 
    top:0;
    right:0;
    left:0;
    height: 40px;
    z-index:20;
    }

    #headerContent {
    background-color: $main-background-color;
    width: $site-width;
    margin:0px auto 0px auto;
    height:40px;

    }

    #headerNav {
    float:right;
    height:37px;
    width:auto;
    margin-top:1px;
    background-color:#464646;
    color:#cccccc;
    }

    #headerNav:hover {
    background-color:#626262;
    cursor:pointer;
    color: white;
    }

    #headerNav:hover #dropDownMenu {
    position:absolute;
    background-color:white;
    border:1px solid gray;
    top:35px;
    right:-39px;
    height:300px;
    width:200px;
    font-weight:bold;
    color:gray;
    display:block !important;
    z-index:1;
    }

    ul li { 
    float:right;
    }

    #photoThumbnail img {
    height:28px;
    width:31px;
    padding-top:5px;
    padding-right:8px;
    -moz-border-radius: 1px 12px 1px 12px;
    border-radius: 1px 12px 1px 12px;

    }

    #currentUser {
    position:relative;
    padding-top:12px;
    padding-left:12px;
    padding-right:6px;
    }


    #siteNavigation {
    display:none;

    }

HTML

<header>
  <div id='headerContent'>
    <div id='LogoHolder'>
    </div>
    <nav id='headerNav'>
      <ul>
        <li id='photoThumbnail'></li>
        <li id='currentUser'>
          <ul id='dropDownMenu'>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
            <li>link5</li>
            <li>link6</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

将非常感谢示例和更正。

亲切的问候

Answer 1

如果忽略了z-index设置，则可能需要添加position属性，将其设置为relative或者需要它。我非常确定如果未设置position属性，则会忽略z-index。

Answer 2

我认为你会发现你正试图破解基本的标记问题。这种

通常采用基于ul的下拉方式

<ul id='headerNav'>
    <li>Menu Title
        <ul class='dropDownMenu>
            <li>link1</li>
            <li>link2</li>
        </ul>
    </li>
</ul>

通过这种方式，您可以在#headerNav li上设置悬停操作：悬停，您的下拉菜单是您的悬停元素的子项，当您将鼠标移动到.dropDownMenu上时菜单将保持打开状态（而不是闪烁）也在徘徊。你关闭..你只需要更好地包装你的html并调整你的CSS以悬停在li上并显示并隐藏“li ul.dropDownMenu”

这应该摆脱重叠的需要 - 并解决你的问题。

如何使用z-index正确控制div的有序堆叠？

2 个答案: