Adding css drop down menu in a template - css

Question

I downloaded a template for my company. I managed to get most things done, but I want to make a drop down menu and I just can't handle it. I tried this explanation How to add drop down menu using CSS? because I don't know JavaScript or jQuery, but it doesn't seem to work on this particular template. Am I describing the wrong class in css?
HTML
</nav>
</section>
<header class="sixteen columns alpha omega">
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług</li>
<ul>
<li>Something You do</li>
<li>TODO</li>
</ul>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega">
</div> <!--Close Social Div-->
</nav>
CSS
.main-nav {
margin-top: 10px;
padding-top: 3px;
padding-bottom: 3px;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.main-nav li {
display: inline;
margin-right: 15px;
}
.social a:link {
float: right;
background-image: url(../img/facebook.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social a:last-child {
float: right;
background-image: url(../img/twitter.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
}
.social a:hover {
background-position: 0 0;
}
.main-nav li {
position: relative;
}
.main-nav ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
.main-nav li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Here is the whole css http://jsfiddle.net/9LcfX/18/
I've tried to rename the description in css from main_nav to alpha etc. but nothing.
Please help me, in advance thanks for Your time.

Answer 1

some structure problem in ur html code just replace html code with below code
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług
<ul>
<li>Something You do </li>
<li>TODO </li>
</ul>
</li>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega"> </div>
</nav>