HTML+；CSS：带有子菜单问题的列表_Html_Css_Hover_Html Lists_Z Index

HTML+；CSS：带有子菜单问题的列表

html css

HTML+；CSS：带有子菜单问题的列表,html,css,hover,html-lists,z-index,Html,Css,Hover,Html Lists,Z Index,我试图建立一个简单的HTML+CSS菜单与子菜单弹出窗口如果一个列表项有一个子列表并被悬停，子列表将显示出来。这已经起作用了但我希望父项位于子项列表的顶部。我用z索引试过了，然后。。失败。子对象总是与父对象重叠我尝试这样做，使弹出窗口看起来像这样： ________ ________ |Link 1| |Link 2|______ |-> Sublink 1| |-> Sublink 2| |__________

我试图建立一个简单的HTML+CSS菜单与子菜单弹出窗口

如果一个列表项有一个子列表并被悬停，子列表将显示出来。这已经起作用了

但我希望父项位于子项列表的顶部。我用z索引试过了，然后。。失败。子对象总是与父对象重叠

我尝试这样做，使弹出窗口看起来像这样：

 ________ ________
 |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>


a{color:#000；}
正文{背景：#444；}
#mainlist{list style:none；}
#主要名单李
{ 
浮动：左；
左边距：10px；
边框顶部：1件纯黑；
左边框：1px纯黑；
右边框：1px纯黑；
填充：10px；
背景：#aaa；
显示：内联；
}
#子列表
{ 
背景：#aaa；
边框：1px纯黑；
宽度：100px；
显示：无；
位置：绝对位置；
列表样式：无；
边际：0px；
填充：0px；
左边距：-11px；
}
#子列表李
{ 
边界：无；
背景：#aaa；
宽度：100%；
文本对齐：左对齐；
}
#子列表li:hover{background:#ccc；}
#mainlistli:hover{z-index:60；}
/*当主列表li悬停时，显示子列表*/
#主列表li:悬停>#子列表
{ 
z指数：50；
显示：块；
}




测试1
测试2

您可以通过稍微调整CSS来实现。目前，您的顶级

正在为您的主要项目设置样式。无法使这些元素显示在

#子列表

上方，因为

#子列表

是它们的子元素（不能将元素的子元素放在其父元素之后）

修复方法是在

标记上应用顶级项目样式。它们是

#子列表

的同级，因此使用z索引将它们堆叠起来很容易：

作为一个简单的演示，将此规则添加到CSS中，您将看到

#子列表

现在位于

下面：

您所要做的就是将所有

#mainlist li

CSS规则传输到

#mainlist li a

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