CSS/HTML: How to make dropdown menu work - html

Question

I am making a test site, and I made it with no drop down menu. It looks like this: http://wrzuc.se/images/52c72647ec30e.png
My Site: http://crafted2.ugu.pl/cn2/
But, now I want to add simple drop down to "serwery". What's wrong in my code ?
HTML:
<!-- MENU CRAFTED NETWORK --->
<div class="menu">
<div id="nav">
<img class="steve" src="images/steve.png"/>
<ul>
<li>STRONA GŁÓWNA</li>
<li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
<li>SERWERY
<ul>
<li><i class="icon-chevron-right"></i>Official Survival Games</li>
<li><i class="icon-chevron-right"></i>Trouble in Mineville</li>
<li><i class="icon-chevron-right"></i>The Herobrine</li>
<li><i class="icon-chevron-right"></i>Hide and Seek</li>
<li><i class="icon-chevron-right"></i>Splegg</li>
<li><i class="icon-chevron-right"></i>One In The Chamber</li>
</ul>
</li>
<li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
<li>FORUM</li>
<li><img src="/CN/images/nav_splitter.png"></li>
<li>SKLEP SMS</li>
<li><img src="/CN/images/nav_splitter.png"></li>
<li>FAQ</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>
<img src="images/email.png" alt="">
<img src="images/youtube.png" alt="">
<img src="images/facebook.png" alt="">
</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;
}
I was getting code to make dropdown from: www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/
Please help me to make it work, and look like my old picture.

Answer 1

Your id is nav and not #navi, right?
display:none to the dropdown menu (as you have it) and then, add a class here in the "serwery" li:
<li class="serwery">SERWERY
Then you display: block the secondary menu on hover:
.serwery:hover > ul {
display: block;
position: absolute;
...
}