[CSS][HTML]Menu rozwijane Opcje

[kujol]

Witam, robię rozwijane menu w css, na razie mam takie coś: efekt, ale chcę zrobić takie coś jak na obrazku

(IMG:http://iv.pl/images/06285480835152098945_thumb.jpg)

Jeśli się nie da to chociaż coś takiego:

(IMG:http://iv.pl/images/68596341903101175324_thumb.jpg)

W linku, który podałem niby jest podobnie, ale gdy najadę od razu na"1" ona się rozwija bez przesunięcia pozostałych w dół "2,3 i 4"- zasłania je (IMG:style_emoticons/default/sad.gif)
Oto kod:

[HTML] pobierz, plaintext 
<ul id="ul">
	<li id="li1">Glowny
		<ul id="ul1">
 
<li id="li">1
	<ul id="bok">
		<a href="#" title="#"> <li id="li2">1.1</li> </a>
		<a href="#" title="#"> <li id="li2">1.2</li> </a>
		<a href="#" title="#"> <li id="li2">1.3</li> </a>
	</ul>
</li>
 
<li id="li">2
	<ul id="bok">
		<a href="#" title="#"> <li id="li2">2.1</li> </a>
		<a href="#" title="#"> <li id="li2">2.2</li> </a>
		<a href="#" title="#"> <li id="li2">2.3</li> </a>
	</ul>
</li>
 
<li id="li">3
	<ul id="bok">
		<a href="#1" title="1"> <li id="li2">3.1</li> </a>
		<a href="#" title="#"> <li id="li2">3.2</li> </a>
		<a href="#" title="#"> <li id="li2">3.3</li> </a>
	</ul>
</li>
 
<li id="li">4
	<ul id="bok">
		<a href="#" title="#"> <li id="li2">4.1</li> </a>
		<a href="#" title="#"> <li id="li2">4.2</li> </a>
		<a href="#" title="#"> <li id="li2">4.3</li> </a>
	</ul>
</li>
 
 
		</ul>
	</li>
</ul>
[HTML] pobierz, plaintext 

i css:

Kod

#ul
{
border-style: solid;
border-width: 1px;
border-color: black;
border-radius: 3px;
text-align:center;
width: 100px;
height: 22px;
cursor: pointer;
list-style-type: none;
padding: 5px;
background: #242424;
font-family:  tahoma;
color: silver;
}

#li1 #ul1
{
overflow: hidden;
display: none;
background: #242424;
border-radius:0px 0px 5px 5px;
}

#li1:hover  #ul1
{
padding: 0;
position: absolute;
display:block;
width: 100px;
}

#li
{
list-style-type: none;
height: 25px;
}

#li:hover
{
background: #404040;
height: 25px;
}

:hover  /*animacja*/
{
-moz-transition: 0.3s ease-in;
-webkit-transition: 0.3s ease-in;
-o-transition: 0.3s ease-in;
transition: 0.3s ease-in;
}



#li1 #bok
{
overflow: hidden;
display: none;
background: #242424;
border-radius:0px 0px 5px 5px;
}

#li:hover  #bok
{
padding: 0;
position: absolute;
display:block;
width: 100px;
}

#li2
{
list-style-type: none;
height: 25px;
}

#li2:hover
{
background: #404040;
height: 25px;
}

#ul a
{
color: silver;
text-decoration:none;
}

Bardziej zależy mi na tym pierwszym, może ktoś pomóc? (IMG:style_emoticons/default/biggrin.gif)

[vermis]

w #li1 #bok dodaj:

Kod

left: 100px;

Spowoduje przesunięcie od lewej o 100px - dopasuj sobie tak żeby było dobrze. W pionie ustaw korzystając z właściwości top

w #li1 #ul1 usuń

Kod

overflof:hidden

bo nic nie zobaczysz