css - CSSのみのドロップダウンメニュー項目が透けて見える

Question

CSSのみのドロップダウンメニューを機能させようとしています。他のコンテンツが透けて見えるという事実を除いて、それは主に機能します、そして私は理由を理解することができません。

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

誰かが私が間違っていることを教えてもらえますか？CSSは私の強いスーツではありません。

ドロップダウンは正しい位置に表示されていますが、他の「テスト」リンクが透けて見えます。画像では、下の2つの「テスト」リンクはドロップダウンの存在によって非表示になっている必要があります。

TIA

Answer 1

(2回目の試行)

OK、私が正しく理解していれば、z-index を UL に移動するだけです。

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