仅显示CSS的下拉菜单项

Question

我正在尝试使用仅限CSS的下拉菜单。它在很大程度上起作用，除了其他内容似乎正在显示的事实，我无法弄清楚原因。

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

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

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

TIA

Answer 1

（第二次尝试）

好的，如果我理解正确你需要做的就是move the z-index to the 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;
}