我有一个下拉菜单 (#dropDownMenu),当鼠标悬停在我网站的“#headerNav”上时会出现该菜单。如果我将#dropDownMenu(最初隐藏显示:无,直到链接悬停)略微放在#headerNav div 上,它才能正常工作。
如果光标没有足够快地移动到出现的下拉菜单,这将停止轻微的闪烁。通过将 #dropDownMenu 略微重叠在 #headerNav 上,这使得当光标实际位于 #dropDownMenu 中时,#headerNav 似乎仍在悬停。
无论如何,我现在想将#dropDownMenu 的重叠部分隐藏在标题或#headerContent 后面,这样一切看起来更整洁,下拉菜单实际上看起来像是出现在#headerNav 下方。
我尝试了不同的 z-index 设置,但似乎都不起作用,这很烦人。当我将 #headerNav:hover #dropDownMenu 的 z-index 设置为 -1 时,它按预期隐藏在所有内容后面。
如果我将标题的 z-index 或 #headerContent 设置为高于“#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>
示例和更正将不胜感激。
亲切的问候
最佳答案
如果您的 z-index 设置被忽略,您可能需要添加 position 属性,将其设置为 relative 或任何需要的值。如果未设置位置属性,我很确定会忽略 z-index。
关于html - 如何使用 z-index 正确控制 div 的堆叠顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9859942/