css - 仅显示 CSS 的下拉菜单项

Question

我正在尝试使仅 CSS 的下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎正在显示而且我无法弄清楚为什么。

http://jsfiddle.net/uQveP/4/

有人可以告诉我我做错了什么吗？CSS 不是我的强项。

下拉列表出现在正确的位置，但您可以看到其他“测试”链接显示出来。在图像中，底部的两个“测试”链接应该被下拉菜单隐藏。

TIA

Answer 1

（第二次尝试）

好的，如果我理解正确，您需要做的就是将 z-index 移动到 ULs：

.drop-menu-header ul, .drop-menu-content ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: right;
  text-align: right;
}

.drop-menu-header ul li, .drop-menu-content ul li {
  display: block;
  position: relative;
  /*POOF*/
}

.drop-menu-header ul li ul, .drop-menu-content ul li ul {
  display: none;
  right: 0;
  /*SHAZAAM!*/
  z-index: 5;
}

.drop-menu-header ul li a {
  display: block;
  white-space: nowrap;
  color: #fff;
}

.drop-menu-content ul li a {
  display: block;
  white-space: nowrap;
}

.drop-menu-header ul li a img.fake-button, .drop-menu-content ul li a img.fake-button {
  padding: 0;
}

.drop-menu-header ul ul li a, .drop-menu-content ul ul li a {
  padding: 5px 15px;
}

.drop-menu-header span {
  padding: 5px 15px;
  display: block;
  white-space: nowrap;
  color: #fff;
}

.drop-menu-content span {
  padding: 5px 15px;
  display: block;
  white-space: nowrap;
}

.drop-menu-header ul li span a, .drop-menu-content ul li span a {
  padding: 0;
  display: inline;
  white-space: nowrap;
}

.drop-menu-header li:hover ul, .drop-menu-content li:hover ul {
  display: block;
  position: absolute;
  border: 1px solid #999999;
}

.drop-menu-header li:hover li {
  float: none;
  background-color: #5c87b2;
}

.drop-menu-content li:hover li {
  float: none;
  background-color: #fff;
}