纯 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;
}