Rozwijane menu w css i chowanie się rozwiniętego menu pod zawartość strony, z-index nie działa Opcje

[MOniToR]

Strona http://www.goprojects20080129.dev.mamboassistance.com/

Znalazłem proste drop down menu css, wszystko ładnie śmiga tylko dla przykładu jak się najedzie na obrazek, który jest jako pierwszy element menu ucina rozwinięte menu, od momentu gdy nachodzi na cześć z zawartością strony. Kombinowałem z z-index ale nie przyniosło to żadnego efektu :/ Często mi się tak zdarzało w innych projektach, zazwyczaj jednak rezygnowałem z rozwijanego menu ale w tym przypadku tak zrobić nie mogę :/ proszę o pomoc...
CSS:

[HTML] pobierz, plaintext 
#menu {
	background:  url(../images/menu.png) no-repeat top left;
	width:524px;
	height:50px;
	text-align:left;
	float:right;
	z-index:400;
}
 
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}
 
#cssdropdown li {
float: left;
position: relative;
}
 
.mainitems{
border: 1px solid black;
background-color: #562f2c;
}
 
.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
 
}
 
.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #562f2c;
border: 1px solid black;
}
 
.subuls li{
width: 100%;
}
 
.subuls li a{
text-decoration: underline;
}
 
#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
 
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
 
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div id="menu"><ul id="cssdropdown">
 
<li class="mainitems">
<a href="http://www.cssdrive.com"><img src="templates/mbpc/images/menu_aboutus.png" alt="" height="20" border="0" /></a>
<ul class="subuls">
<li><a href="">Gordon Mac</a></li>
<li><a href="">Juiced Thoughts</a></li>
<li><a href="">The Daily Flight</a></li>
<li><a href="">GrapeFruit</a></li>
</ul>
</li>
 
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
</ul>
 
<div id="restofcontent">
<br />
 
</div></div>
[HTML] pobierz, plaintext 

Ten post edytował MOniToR 7.02.2008, 12:33:00

[nevt]

oddziel w kodzie i spozycjonuj menu i resztę, czyli w htlm:

[HTML] pobierz, plaintext 
<div id="menu">
  ...
</div>
<div id="restofcontent">
  ...
</div>
[HTML] pobierz, plaintext 

a w css dodaj:

Kod

#menu
{ position: relative; z-index: 10; overflow: visible; }

#restofcontent
{ position: relative; z-index: 1; top: -100px; }
//top ustaw tak żeby ładnie "podeszło" pod menu...

i powinno być ok. chyba że się gdzieś pomyliłem, pisałem z pamięci...

Ten post edytował nevt 7.02.2008, 13:03:51