css - 在模板中添加 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>