在模板中添加css下拉菜單

Question

我爲我的公司下載了一個模板。我設法完成了大部分工作，但我想製作一個下拉菜單，但我無法處理它。我試過這個解釋How to add drop down menu using CSS?，因爲我不知道JavaScript或jQuery，但它似乎不適用於這個特定的模板。我在css中描述錯誤的類嗎？

HTML

</nav> 
</section> 
<header class="sixteen columns alpha omega"> 
    <nav class="main-nav sixteen columns"> 
     <ul class="ten columns alpha"> 
      <li><a href="index.html">Start</a></li> 
      <li><a href="kancelaria.html">O Kancelarii</a></li> 
      <li><a href="uslugi.html">Zakres Usług</a></li> 
     <ul> 
     <li><a href="#">Something You do</a></li> 
     <li><a href="#">TODO</a></li> 
    </ul> 
      <li><a href="press.html">Press Room</a></li> 
      <li><a href="kontakt.html">Kontakt</a></li> 
     </ul> 
     <div class="social six columns omega"> 
      <a href="#"></a> 
      <a href="#"></a> 
     </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; 
} 

這裏是整個CSS http://jsfiddle.net/9LcfX/18/ 我試着在CSS的描述重新命名main_nav到alpha等，但一無所獲。

請提前幫助我，謝謝你的時間。

Answer 1

在烏拉圭回合的HTML代碼中的一些結構問題，只是替換下面的代碼的html代碼

<nav class="main-nav sixteen columns"> 
    <ul class="ten columns alpha"> 
    <li><a href="index.html">Start</a></li> 
    <li><a href="kancelaria.html">O Kancelarii</a></li> 
    <li><a href="uslugi.html">Zakres Usług</a> 
     <ul> 
     <li><a href="#">Something You do</a> </li> 
     <li><a href="#">TODO</a> </li> 
     </ul> 
    </li> 
    <li><a href="press.html">Press Room</a></li> 
    <li><a href="kontakt.html">Kontakt</a></li> 
    </ul> 
    <div class="social six columns omega"> <a href="#"></a> <a href="#"></a> </div> 
</nav>