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>

在模板中添加css下拉菜单

1 个答案: