Выдвижное меню

вопрос

Привет всем! Нуждаюсь в вашей помощи, а именно: Есть код меню(html/css) и код второго меню(html/css) вопрос такого плана: Как их соединить в одно целое, чтобы при нажатии на иконку выдвигалось меню №2?
Пример:

Меню №1
HTML


<div id="header">
<ul class="navigation">
        <li class="software"><a href="/software/">Software</a></li>
        <li class="games"><a href="/game/">Games</a></li>
        <li class="movies"><a href="/movies/">Movies</a></li>
        <li class="music"><a href="/music/">Music</a></li>
        <li class="shows"><a href="/tv-shows/">TV Shows</a></li>
        <li class="ebooks"><a href="/ebooks/">eBooks</a></li>
        <li class="magazines"><a href="/magazines/">Magazines</a></li>
        <li class="graphics"><a href="/graphics/">Graphics</a></li>
        <li class="tutorials"><a href="/tutorials/">Tutorials</a></li>
        <li class="mobiles"><a href="/mobil/">PDA / Mobiles</a></li>
        <li class="portables"><a href="/portable/">Portables</a></li>
        <li class="wallpapers"><a href="/wallpaper/">Wallpapers</a></li>
        <li class="others"><a href="/misc/">Others</a></li>
        <li class="forums"><a href="/forums/" target="_blank">Forums</a></li>
        <li class="sitemap"><a href="/sitemap.html">Sitemap</a></li>
    </ul>

CSS


#header {
    position: relative;
    padding: 45px 0 0 0;
    height: 165px;
}
#header .navigation {
    margin: 0 auto; padding: 0;
    list-style-type: none;
    width: 1125px;
}
#header .navigation li {
    float: left;
    background: no-repeat url(../images/bckheadernavigation.png);
    font-size: 11px;
}
#header .navigation .software {
    background-position: center top;
}
#header .navigation .games {
    background-position: center -60px;
}
#header .navigation .movies {
    background-position: center -120px;
}
#header .navigation .music {
    background-position: center -180px;
}
#header .navigation .shows {
    background-position: center -240px;
}
#header .navigation .ebooks {
    background-position: center -300px;
}
#header .navigation .magazines {
    background-position: center -360px;
}
#header .navigation .graphics {
    background-position: center -420px;
}
#header .navigation .tutorials {
    background-position: center -480px;
}
#header .navigation .mobiles {
    background-position: center -540px;
}
#header .navigation .portables {
    background-position: center -600px;
}
#header .navigation .wallpapers {
    background-position: center -660px;
}
#header .navigation .others {
    background-position: center -720px;
}
#header .navigation .forums {
    background-position: center -780px;
}
#header .navigation .sitemap {
    background-position: center -840px;
}
#header .navigation a {
    float: left;
    padding: 45px 0 0 0;
    width: 75px;
    text-align: center; line-height: 15px;
    color: #5b5b5b;
    text-decoration: none;
}
#header .navigation a:hover {
    color: #ec006a;
    text-decoration: underline;

Меню №2
HTML


<div class="media-ranking">
    <ul class="nav controls">
        <li><a>Софт</a></li>
        <li><a>Алфавит</a></li>
    </ul>
    <div class="case genres">
        <ul class="nav">
            <li><a href="#">Анимация</a></li>
        </ul>
    </div>
    <div class="case alphabet">
        <ul class="nav">
            <li><a href="#">0-9</a></li>
            <li><a href="#">А</a></li>
            <li><a href="#">Б</a></li>
            <li><a href="#">В</a></li>
            <li><a href="#">Г</a></li>
            <li><a href="#">Д</a></li>
            <li><a href="#">Е</a></li>
            <li><a href="#">Ж</a></li>
            <li><a href="#">З</a></li>
            <li><a href="#">И</a></li>
            <li><a href="#">К</a></li>
            <li><a href="#">Л</a></li>
            <li><a href="#">М</a></li>
            <li><a href="#">Н</a></li>
            <li><a href="#">О</a></li>
            <li><a href="#">П</a></li>
            <li><a href="#">Р</a></li>
            <li><a href="#">С</a></li>
            <li><a href="#">Т</a></li>
            <li><a href="#">У</a></li>
            <li><a href="#">Ф</a></li>
            <li><a href="#">X</a></li>
            <li><a href="#">Ц</a></li>
            <li><a href="#">Ч</a></li>
            <li><a href="#">Ш</a></li>
            <li><a href="#">Щ</a></li>
            <li><a href="#">Э</a></li>
            <li><a href="#">Ю</a></li>
            <li><a href="#">Я</a></li>
        </ul>
    </div>
</div>

CSS


.media-ranking{position:relative;}
.media-ranking .controls{position:absolute;left:20px;top:-25px;float:left;}
.media-ranking .controls li{float:left;}
.media-ranking .controls li a{display:block;padding:0 16px;height:25px;color:#000000;font-size:.85em;line-height:25px;text-transform:uppercase;cursor:pointer;border-radius:2px 2px 0 0;}
.media-ranking .controls li a:hover{color:#1a74a9;}
.media-ranking .controls li.current a,.media-ranking .controls li.current a:hover{color:#ffffff;background:#7dbe0c;}
.media-ranking .case{display:none;padding:5px 20px;color:#ffffff;background:#7dbe0c;}
.media-ranking .case.visible{display:block;}
.media-ranking .case ul{overflow:hidden;}
.media-ranking .case ul li{float:left;}
.media-ranking .case a{display:block;float:left;padding:1px 7px;color:#ffffff;border-radius:2px;}
.media-ranking .case a:hover{color:#1a74a9;background:#ffffff;}
.media-ranking .case.genres ul li{width:133px;}
.media-ranking .case.alphabet ul li{margin-right:5px;}