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ą?

[erix]

Podaj ten kod, bo nie wiem, czy jest faktycznie taki, jak mówisz.

[mrf]

Lista która ukrywa się pod obrazkami:

[CSS] pobierz, plaintext 
.menu li ul{
	display: block;
	position: absolute;
	text-align: left;
	margin-left: 0px;
	padding-left: 0px;
	width: 100px;
	height: 1px;
	overflow: hidden;
	padding-top: 15px;
}
[CSS] pobierz, plaintext 

Elementy powyższej listy:

[CSS] pobierz, plaintext 
.menu li li {
	display: block;
	text-align: left;
	border: none;
	margin-left: 0px;
}
 
.menu li li a{
	display: block;
	text-decoration: none;
	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
	border: none;
}
[CSS] pobierz, plaintext 

Obrazki:

[CSS] pobierz, plaintext 
img.top_obrazek {
	border: 0px;
	margin-left: 1px;
	margin-right: 0px;
	-moz-opacity: 0.70;
	-khtml-opacity: 0.70;
	opacity: 0.70;
	filter: alpha(opacity=60);
}
 
img:hover.top_obrazek {
	-moz-opacity: 1.00;
	-khtml-opacity: 1.00;
	opacity: 1.00;
	filter: alpha(opacity=100);
}
[CSS] pobierz, plaintext 

Ten post edytował mrf 16.11.2009, 01:06:21

[erix]

A HTML?

[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