[css] Menu wchodzące pod treść Opcje

[shd]

Witam,
Szukam już kolejny raz gdzie tkwi błąd i nie potrafię sobie z nim poradzić więc może Wy mi pomożecie.

Otóż problem dotyczy menu, które rozwijając się chowa się pod galerię zdjęć. Zobaczyć to można na stronie http://www.tomaszkrzak.pl/new/fotografia/galeria/ - ostatnia pozycja: KONTAKT.

Kod menu:

[HTML] pobierz, plaintext 
<div id="navi">
	<!-- menu -->
	<ul id="menu">
		<li><a href="<?php echo $path; ?>fotografia/galeria">Fotografia</a>
		<ul>
			<li><a href="<?php echo $path; ?>fotografia/galeria" title="">Galeria</a></li>
			<li><a href="<?php echo $path; ?>fotografia/albumy" title="">Albumy</a></li>
			<li><a href="<?php echo $path; ?>fotografia/okolicznosciowa" title="">Okolicznościowa</a></li>
			<li><a href="<?php echo $path; ?>fotografia/produktowa" title="">Produktowa</a></li>
		</ul>
		</li>
		<li><a href="#" title="">Grafika</a>
		<ul>
			<li><a href="<?php echo $path; ?>grafika/spaceart" title="">Spaceart</a></li>
			<li><a href="<?php echo $path; ?>grafika/landscape" title="">Landscape</a></li>
			<li><a href="<?php echo $path; ?>grafika/3d" title="">3D</a></li>
		</ul>
		</li>
		<li><a href="#" title="">Kontakt</a>
		<ul class="last">
			<li class="last"><a href="mailto:kontakt@tomaszkrzak.pl?subject=Kontakt ze strony www" title=""><img src="<?php echo $path; ?>img/profile_email.png">kontakt@tomaszkrzak.pl</a></li>
			<li class="last"><a href="gg:961354" title=""><img src="<?php echo $path; ?>img/profile_gg.png">961354</a></li>
			<li class="last"><a href="http://www.facebook.com/tomasz.krzak" title=""><img src="<?php echo $path; ?>img/profile_facebook.png">tomasz.krzak</a></li>
			<li><a href="http://shados.plfoto.com/" title=""><img src="<?php echo $path; ?>img/profile_view.png"><span style="font-family: anton;">Zobacz profil na:</span> plfoto</a></li>
			<li><a href="http://shados.digart.pl/" title=""><img src="<?php echo $path; ?>img/profile_view.png"><span style="font-family: anton;">Zobacz profil na:</span> digart</a></li>
		</ul>
		</li>
	</ul>
</div>
[HTML] pobierz, plaintext 

Style menu:

[HTML] pobierz, plaintext 
#navi {margin:0px auto 0; font-family: LatoRegular;  float: left; border: 0px solid; position: relative;}
 
#menu {display: block; padding: 0 0px 0 !important; margin: 54px auto 0; font-size: 18px; background: transparent; }
#menu li {list-style-type: none; margin: 0 auto; float: left; }
#menu li:hover {background: url('../img/bg-transp75.png');}
#menu li a {display: block; color: #fff; text-decoration: none; padding: 7px 15px 7px; font-family:  Anton; letter-spacing: -0px; text-transform: uppercase; text-shadow: 1px 1px 1px #000;}
#menu li a:hover {background: ; color: #fff; text-shadow: none;}
#menu li a.current {background: url('../img/bg-transp75.png'); color: #fff; }
#menu li li {width: 100%;}
#menu li li a {width: 100%; font-size: 11px;font-family: Latobold, arial, sans-serif; display: block;}
#menu li li a:hover {background: #fff; color: black; text-shadow: none;}
#menu li ul {overflow: hidden; display: none; background: url('../img/bg-transp75.png');}
#menu li:hover ul {position: absolute; padding: 0; display: block; width: auto;}
#menu li:hover ul.last {right: 0; width: auto; padding: 0; text-transform: none;}
#menu li:hover ul.last li a{text-transform: none;width: auto; display:block; vertical-align: middle;}
#menu li:hover ul.last img {vertical-align: middle; margin-right: 9px;}
[HTML] pobierz, plaintext 

Cały div#navi ujęty jest jeszcze w div#header:

[HTML] pobierz, plaintext 
#header {width: 100%; height: 150px; border: 0px solid; margin: 0 auto;}
[HTML] pobierz, plaintext 

Poradźcie i napiszcie co jest nie tak, że to menu wskakuje pod treść...

[lukesh]

Wszystko jest w jak najlepszym porządku - kolejne elementy przykrywają poprzednie elementy i tak właśnie powinno być. Jeśli chcesz, żeby było inaczej, musisz w CSS dodać z-index:

[HTML] pobierz, plaintext 
#menu {z-index:2; display: block; padding: 0 0px 0 !important; margin: 54px auto 0; font-size: 18px; background: transparent; }
[HTML] pobierz, plaintext 

Możesz próbować z większymi liczbami, jeśli nie zadziała, a np. obrazkom dać mniejszy parametr.