Linux HTML+CSS：带有子菜单问题的列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3677180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML+CSS: List with submenu problems
提问by JohnKa
im trying to build a simple HTML+CSS menu with submenu popups.
我正在尝试构建一个带有子菜单弹出窗口的简单 HTML+CSS 菜单。
If a list item has a child list and gets hovered the child list would show up. This works already.
如果一个列表项有一个子列表并且被悬停，子列表就会显示出来。这已经有效了。
But I want the parent item to be on top of the child list. I tried it with the z-index and.. failed. The child always overlaps the parent.
但我希望父项位于子列表的顶部。我用 z-index 尝试过，但失败了。孩子总是与父母重叠。
I try to do this to make the popup look like this:
我尝试这样做以使弹出窗口看起来像这样：
________ ________
|Link 1| |Link 2|______
|-> Sublink 1|
|-> Sublink 2|
|____________|
So parent item and child item have no visible borders between them but borders around them.
所以父项和子项之间没有可见的边框，但它们周围有边框。
This is the HTML:
这是 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>
采纳答案by Pat
You can do it by tweaking your CSS slightly. Currently your top level <li>'s are styling your main items. There's no way to get these to appear above the #sublistbecause the #sublistis a child of them (you can't put a child of an element behind its parent).
您可以通过稍微调整 CSS 来实现。目前，您的顶级<li>正在设计您的主要项目。没有办法让这些出现在 the 之上，#sublist因为 the#sublist是它们的子元素（你不能把一个元素的子元素放在它的父元素后面）。
The fix is to apply the top level item styles on the <a>tags. These are siblings of the #sublistand so stacking them with z-index is easy:
解决方法是在<a>标签上应用顶级项目样式。这些是 的兄弟，#sublist所以用 z-index 堆叠它们很容易：
As a simple demonstration, add this rule to your CSS and you'll see the #sublistis now below the <a>:
作为一个简单的演示，将此规则添加到您的 CSS 中，您将看到#sublist现在位于以下位置<a>：
#mainlist li a {
padding: 10px;
background: red;
position: relative;
z-index: 60;
}
All you have to do is transfer all the #mainlist liCSS rules to #mainlist li a.
您所要做的就是将所有#mainlist liCSS 规则转移到#mainlist li a.
