HTML + CSS：与子菜单问题列表

即时通讯尝试建立一个简单的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>

来源

2010-09-09 JohnKa

您可以通过稍微调整你的CSS做。目前您的顶级<li>的样式是您的主要项目。没有办法让这些出现在#sublist之上，因为#sublist是他们的孩子（你不能将一个元素的子元素放在父元素的后面）。

解决的办法是在<a>标签上应用顶级项目样式。这些都是#sublist的兄弟姐妹等用z-index堆叠它们很容易：

作为一个简单的演示，该规则添加到您的CSS，你会看到现在#sublist低于<a>：

#mainlist li a { 
    padding: 10px; 
    background: red; 
    position: relative; 
    z-index: 60; 
}

您只需将所有#mainlist li CSS规则转换为#mainlist li a即可。

来源

2010-09-09 14:23:50 Pat

谢谢，效果很好。 – JohnKa 2010-09-09 14:31:01

HTML + CSS：与子菜单问题列表

回答

相关问题