CSS / HTML: как заставить работать выпадающее меню

Я делаю тестовый сайт, и я сделал его без раскрывающегося меню. Это выглядит так: http://wrzuc.se/images/52c72647ec30e.png

Мой сайт: http://crafted2.ugu.pl/cn2/

Но теперь я хочу добавить простой снимок в "serwery". Что не так в моем коде?

HTML:

<!-- MENU CRAFTED NETWORK --->
<div class="menu">
    <div id="nav">
        <img class="steve" src="images/steve.png"/>
        <ul>
            <li><a href="#">STRONA GŁÓWNA</a></li>
            <li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
            <li><a href="/cn2/serwery">SERWERY</a>
        <ul>
            <li><a href="http://hivemc.com/survival-games"><i class="icon-chevron-right"></i>Official Survival Games</a></li>
            <li><a href="http://hivemc.com/trouble-in-mineville"><i class="icon-chevron-right"></i>Trouble in Mineville</a></li>
            <li><a href="http://hivemc.com/the-herobrine"><i class="icon-chevron-right"></i>The Herobrine</a></li>
            <li><a href="http://hivemc.com/hide-and-seek"><i class="icon-chevron-right"></i>Hide and Seek</a></li>
            <li><a href="http://hivemc.com/splegg"><i class="icon-chevron-right"></i>Splegg</a></li>
            <li><a href="http://hivemc.com/one-in-the-chamber"><i class="icon-chevron-right"></i>One In The Chamber</a></li>
        </ul>
            </li>
            <li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
            <li><a href="/forum">FORUM</a></li>
            <li><img src="/CN/images/nav_splitter.png"></li>
            <li><a href="/cn2/sklep">SKLEP  SMS</a></li>
            <li><img src="/CN/images/nav_splitter.png"></li>
            <li><a href="/cn2/wiki">FAQ</a></li>
        </ul>
    </div>
    <div class="ip"><p>IP: CRAFTED.PL</p></div>
        <div class="statystyki">
              <p>DOŁĄCZ DO <b>1267</b> GRACZY ONLINE!</p>
              <a href="http://crafted.pl/index.php" class="social"><img src="images/email.png" alt=""></a>
              <a href="/youtube" class="social2"><img src="images/youtube.png" alt=""></a>
              <a href="/email" class="social2"><img src="images/facebook.png" alt=""></a>                   
        </div><!-- KONIEC MENU -->

CSS:

.menu {
    padding: 0;
    margin: 0;
    border: 0;
    height: 132px;
    position:absolute;
    top: 320px;
    background: url(../images/menu.png) repeat-x;
    width: 100%;
} 

#navi select {
        display:none;
        padding:4px 8px;
        border: 1px dotted #CCC;
        margin:3px 0px 5px 0px;
        font-family: Crafted;
        color: #807f7f;
        font-size:10pt;
        font-weight:normal;
        text-decoration:none;
}

.ip {background:url('../images/ip.png') no-repeat;margin:11px 0 0 0;width:215px;height:50px;float:right;}
.ip p{font-family:Crafted;font-size:31px;color:#fff;text-align:center;width:100%;height:30px;margin:1px 0 0 0;float:left;padding-left:15px;}
.statystyki p{font-family:Crafted;font-size:40px;color:#fff;width:100%;height:30px;margin:10px 0 0 0;float:left;padding-left:70px;}
.social2 {margin: -40px 0 0 0;float: right;position: relative;width: auto;height: auto;}
.social2:hover{opacity:0.8;}
.social {margin: -40px 0 0 0;float: right;margin-right: 60px;position: relative;width: auto;height: auto;}
.social:hover{opacity:0.8;}

.steve {
    margin: -79px 0 0 0;
    background: url(../images/steve.png) repeat-x;
    position: absolute;
    margin-left: 700px;
    float: left;
}

#navi {
    float:left;
    padding-left: 60px;
}

#navi ul {
    float:left;
    padding:0px;
    margin:0px;
}

#navi ul li {
    float:left;
    top: 10px;
    display:inline-block;
    padding:12px 12px 13px 12px;
    list-style-type: none;
    position:relative;
}

#navi ul li:first-child{
    float:left;
    display:inline-block;
    padding:12px 12px 13px 12px;
    list-style-type: none;
    position:relative;
}

#navi ul li a, #navi ul li a:visited{
    font-family: Crafted;
    color: #044B55;
    font-size:22px;
    font-weight:normal;
    text-decoration:none;
}


#navi ul li a:hover{
    font-family: 'Crafted',Arial, Helvetica, sans-serif;
    color: #006775;
    font-weight:normal;
    text-decoration:none;
}

#navi ul li ul{
    position:absolute;
    display: none;
    z-index: 2000;
    padding-top:13px;
    margin-left:-13px;
    background-color:white;
}

#navi ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}

#navi ul ul li a {
    padding: 15px 40px;
    color: #fff;
}      

Я получаю код для создания выпадающего списка: www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/

Пожалуйста, помогите мне заставить его работать и выглядеть как моя старая картина.