Nietypowe rozwijane menu strony, prośba o pomoc Opcje

[razekAB]

Witam wszystkich, to jest mój pierwszy post na tym forum.
Jestem newbie jeżeli chodzi o tworzenie stron www.
Chciałbym stworzyć menu podobne do tego które znajduje się na tej stronie: http://atlantica.nexon.net/ , jednak nie mam zielonego pojęcia jak zrobić takie menu. Spędziłem kilka godzin szukając na google, przepatrzyłem sporo stron z tutorialami i nie znalazłem tego czego szukałem.

Probowałem sam zrobić, jednak efekt nie wyszedł tak jak chciałem, prosiłbym o poprawienie kodu.

Poniżej HTML i CSS:

CODE

<div id="kontener">

<div id="navi_bar">

<div id="navi_top">
<a href="#"><img src="img/news_b.png"></a>
<a href="#"><img src="img/poradniki_b.png"></a>
<a href="#"><img src="img/spolecznosc_b.png"></a>
<a href="#"><img src="img/rankingi_b.png"></a>
<a href="#"><img src="img/item_shop_b.png"></a>
<a href="#"><img src="img/support_b.png"></a>
</div>

<ul class="menu_list">
<li class="marginesy">

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>

</li>
<li>

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>

</li>
<li>

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>

</li>
<li>

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>

</li>
<li>

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>

</li>
<li>

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>

</li>
</ul>
</div>

</div>

CODE

#kontener #navi_bar {
width: 1005px;
height: 49px;
overflow: hidden;
background: url(img/pasek_menu.png) no-repeat;
color: #fff;
-moz-transition: height .2s ease-in-out;
-webkit-transition: height .2s ease-in-out;
-o-transition: height .2s ease-in-out;
}

#kontener #navi_bar:hover {
height: 216px;
}

#kontener #navi_bar #navi_top {
width: 1005px;
height: 49px;
}

#kontener #navi_bar #navi_top a img {
margin:15px 25px 0px 25px;
}

#kontener #navi_bar .menu_list li {
position: relative;
list-style: none;
float: left;
display: block;
width:150px;
margin: 0 0 10px 0;
padding:0px;
}

#kontener #navi_bar .menu_list li a{
color:#fff;
text-decoration:none;
}

Dodatkowo podaje link do tego menu: http://beta.razor-online.cba.pl/testy/menu.htm