HTML+CSS：带有子菜单问题的列表
我正在尝试构建一个带有子菜单弹出窗口的简单 HTML+CSS 菜单。
如果列表项有子列表并且将鼠标悬停，则会显示子列表。这已经有效了。
但我希望父项位于子列表的顶部。我用 z-index 尝试过，但失败了。 孩子总是与父母重叠。
我尝试这样做以使弹出窗口看起来像这样：
________ ________
|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>
im trying to build a simple HTML+CSS menu with submenu popups.
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.
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>
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以通过稍微调整 CSS 来做到这一点。目前，您的顶级
正在设计您的主要项目。无法让它们出现在#sublist上方，因为#sublist是它们的子级（您不能将元素的子级放在其父级后面） 。修复方法是在
标记上应用顶级项目样式。这些是#sublist的同级，因此使用 z-index 堆叠它们很容易：作为一个简单的演示，将此规则添加到您的 CSS 中，您将看到
#sublist现在位于下方：您所要做的就是将所有
#mainlist liCSS 规则转移到#mainlist li a。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).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:As a simple demonstration, add this rule to your CSS and you'll see the
#sublistis now below the<a>:All you have to do is transfer all the
#mainlist liCSS rules to#mainlist li a.