我正在尝试构建一个带有子菜单弹出窗口的简单 HTML+CSS 菜单。
如果一个列表项有一个子列表并且被悬停，子列表就会出现。这已经有效了。
但我希望父元素位于子列表的顶部。我用 z-index 试过了，但失败了。 child 总是与 parent 重叠。
我尝试这样做以使弹出窗口看起来像这样:
________ ________
|Link 1| |Link 2|______
|-> Sublink 1|
|-> Sublink 2|
|____________|
所以父项和子项之间没有可见的边界，但在它们周围有边界。
这是 HTML:
<html>
<head>
<style type="text/css">
a { color: #000; }
body { background: #444; }
#mainlist { list-style: none; }
#mainlist li
{
float: left;
margin-left: 10px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 10px;
background: #aaa;
display: inline;
}
#sublist
{
background: #aaa;
border: 1px solid black;
width: 100px;
display: none;
position: absolute;
list-style: none;
margin: 0px;
padding: 0px;
margin-left: -11px;
}
#sublist li
{
border: none;
background: #aaa;
width: 100%;
text-align: left;
}
#sublist li:hover { background: #ccc; }
#mainlist li:hover { z-index: 60; }
/* When mainlist li is hovered show the sublist */
#mainlist li:hover > #sublist
{
z-index: 50;
display: block;
}
</style>
</head>
<body>
<ul id="mainlist">
<li><a href="#">Testlink 1</a></li>
<li><a href="#">Testlink 2</a>
<ul id="sublist">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
</ul>
</body>
</html>
最佳答案
您可以通过稍微调整 CSS 来实现。当前您的最高级别<li>正在为您的主要元素设计样式。没有办法让这些出现在 #sublist 之上因为#sublist是它们的子元素(您不能将元素的子元素放在其父元素之后)。
解决方法是在 <a> 上应用顶级元素样式标签。这些是 #sublist 的 sibling 所以用 z-index 堆叠它们很容易:
作为一个简单的演示，将此规则添加到您的 CSS 中，您将看到 #sublist现在低于<a> :
#mainlist li a {
padding: 10px;
background: red;
position: relative;
z-index: 60;
}
您所要做的就是转移所有#mainlist li CSS 规则为 #mainlist li a .
关于HTML+CSS : List with submenu problems，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3677180/