хочу сделать выпадающее меню SCC

[wait]

хочу сделать выпадающее меню дело в том что - скачал исходник меня он устраивает но только он 2 уровня а мне нужен первого вот пример http://www.imago-office.ru/ хочу так только без кнопки меню....

КОД HTML

</div>
<div class="clear"></div>
<div class="menuzone">
<div class="menu">
<ul class="knopka">
<li class="knopkamenu">

<div>
<ul>
<li>
<a href="http://megaweb.su/">Главная</a>
</li>
<li>
<a href="http://megaweb.su/">Категория</a>
<ul>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория </a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория </a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория </a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Категория</a>
<ul>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Категория</a>
<ul>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Категория</a>
<ul>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
<li>
<a href="http://megaweb.su/">Подкатегория</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Категория</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="menuright">
<div class="mainmenu">
<ul>
</ul>
</div>

[wait]

Код SCC

=================================== =============================
Ôàéë ñêà÷àí ñ ñàéòà http://megaweb.su/
=================================== ================================ */
.menu { position:relative; }
.menu ul { padding:0; margin:0; list-style:none; }
.menu ul.knopka { position:relative; z-index:100; }
.menu ul.knopka li.knopkamenu { float:left; width:100px; height:35px; background:url(../img/tab4.png); -o-border-radius: 5px 0 0 5px; -icab-border-radius: 5px 0 0 5px; -khtml-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-top-left-border-radius: 5px; -webkit-bottom-left-border-radius: 5px; border-radius: 5px 0 0 5px; }
.menu ul.knopka li.knopkamenu a.knopochka { display:block; height:35px; line-height:35px; padding-left:10px; width:90px; text-decoration:none; font-size:12px; font-family:arial, sans-serif; color:#444; font-weight:bold; float:left; background:url(../img/arrow.gif) no-repeat 60px center; }
.menu ul.knopka div {
position:absolute;
left:82px;
top:3px;
width:600px;
height:0;
z-index:-1;
overflow:hidden;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.menu ul.knopka div ul { position:absolute; left:-600px; top:0; background:url(../img/tab4.png); -o-border-radius: 0 5px 5px 0; -icab-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-top-right-border-radius: 5px; -webkit-bottom-right-border-radius: 5px; border-radius: 0 5px 5px 0; transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; }
.menu ul.knopka ul li { float:left; height:35px; position:relative; }
.menu ul.knopka ul li a { float:left; height:35px; line-height:35px; white-space:nowrap; padding:0 15px; text-decoration:none; font-size:13px; font-family:arial, sans-serif; color:#444; font-weight:bold; background:url(../img/divider.png) no-repeat left top; }
.menu ul.knopka div ul ul { position:absolute; left:0; top:-170px; width:155px; z-index:-1; transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; }
.menu ul.knopka div ul ul li { float:left; width:155px; height:25px; }
.menu ul.knopka div ul ul li a { display:block; width:125px; padding-left:15px; text-decoration:none; font-size:13px; font-family:arial, sans-serif; color:#444; font-weight:bold; height:25px; line-height:25px; font-weight:normal; background:none; }
.menu ul.knopka li:hover > a.knopochka { color:#fff; background:url(../img/arrow.png) no-repeat 60px center; }
.menu ul.knopka li:hover div { left:100px; top:0; height:180px; width:600px; }
.menu ul.knopka :hover div ul { left:0; }
.menu ul.knopka :hover div ul ul { left:1px; top:-180px; padding-bottom:5px; background:#AFDAFF; -o-border-radius: 0 0 5px 5px; -icab-border-radius: 0 0 5px 5px; -khtml-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-bottom-left-border-radius: 5px; -webkit-bottom-right-border-radius: 5px; border-radius: 0 0 5px 5px; }
.menu ul.knopka li:hover div ul li:hover a { position:relative; }
.menu ul.knopka li:hover div ul li:hover > a { color:#fff; }
.menu ul.knopka :hover div ul :hover ul { left:1px; top:35px; }

[Naive]

Шикарно код оформлен, воистину SCC, Ъ.