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]

kod który ci nie działa - to nie ten sam kod który pokazujesz tu na forum - wystaw gdzieś tą stronkę - wtedy będzie można popatrzeć co naprawdę nie trybi...

a elementy renderowane są przez przeglądarkę w takiej kolejności:

napierw rodzice, potem dzieci (bez względu na z-index) - dzieci są zawsze "nad" rodzicami
bracia według z-index - większy z-index jest "nad" mniejszym
jeśli bracia nie mają z-index (albo mają jednakowe) to według kolejności wystąpienia w kodzie - element później zdefiniowany jest "nad" wcześniej zdefiniowanym

innych reguł nie ma (nie licząc flasha, ramek czy innych plugin'ów)

EDIT:
coś ty wykombinował (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif)

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

W <div id="restofcontent"> MUSISZ ZAWRZEć CAŁĄ POZOSTAŁĄ ZAWARTOŚć STRONY (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif) !

Ten post edytował nevt 7.02.2008, 15:16:53