Menu nad przezroczystymi obrazkami, lista ul ukrywa się pod obrazkami z opacity Opcje

[mrf]

Witam,

tworzę menu w CSS i napotkałem pewien problem. Otóż, pod wspomnianym menu mam zamiar umieścić obrazki, które mają zadeklarowaną cechę przezroczystości (filter, -moz-opacity oraz opacity). Gdy menu zostanie rozwinięte, obrazki te nakładają się na menu i "zasłaniają" elementy listy. W celu uniknięcia pytań informuję, że lista ul, w której znajduje się rozwijane menu ma cechę position: absolute. Jeśli usunę wartość opacity dla obrazków, problem znika, jednak zależy mi na zachowaniu tego efektu.

Czy zna ktoś rozwiązanie, aby menu było wyświetlane nad obrazkami z przezroczystością?

[mrf]

[HTML] pobierz, plaintext 
<div class="NAWIGACJA">
   <ul class="menu">
      <li>MENU 1
            <ul>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
            </ul>
      </li>
      <li>MENU 2
            <ul>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
            </ul>
      </li>
      <li>MENU 3
            <ul>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
                  <li><a href="index.php?id=link">Link</a></li>
            </ul>
      </li>
   </ul>
</div>
 
<div class="OBRAZKI">
      <a href="link.php"><img src="..." class="top_obrazek" alt="..." /></a>
      <a href="link.php"><img src="..." class="top_obrazek" alt="..." /></a>
      <a href="link.php"><img src="..." class="top_obrazek" alt="..." /></a>
      <a href="link.php"><img src="..." class="top_obrazek" alt="..." /></a>
      <a href="link.php"><img src="..." class="top_obrazek" alt="..." /></a>
</div>
[HTML] pobierz, plaintext 

i jeszcze CSS od div'ów OBRAZKI i NAWIGACJA

[CSS] pobierz, plaintext 
.NAWIGACJA {
	width: 970px;
	height: 50px;
	text-align: left;
	position: relative;
	background: url("...") top repeat-x;
}
 
.OBRAZKI {
	position: relative;
	float: left;
	border: 1px solid #dedede;
	margin: 8px;
	padding: 2px 0px;
	text-align: center;
}
[CSS] pobierz, plaintext