将菜单项堆叠在一起答案

【问题标题】：Stacking menu items under eachother将菜单项堆叠在一起
【发布时间】：2014-01-31 21:01:15
【问题描述】：

我有一个带有子菜单的菜单，但它们不堆叠。他们都被挤进了一个狭小的空间。我做错了什么？

顺便说一句，我正在使用 scss，所以我希望也可以发布我的 css 输出。

提前致谢！

我的css代码：

#nav ul {
    position: absolute;
    width: 220px;
    left: -1000px;
}

#nav li:hover ul {
    left: auto;
}

#menu {
  font-size: 15px;
  font-family: $myriad;
  color: $white;
  background-color: $lightpurple;
  border: 1px solid $lightpurple;
  ul {
    margin-left: -40px;
    display:block;
  }
  li {
    display: inline;
    padding: 15px;
    &:hover {
      background-color: $darkpurple;
      padding: 15px;
    }
  }
 a {    
    color: $white;
    text-decoration:none;
    &:hover{
    color: $lightgray; 
    }
        i {
            font-size:9px;
            &.icon{
                font-size:17px;
            }

        }
    }
}

我的html代码：

 <nav id="menu">
        <ul id="nav">
            <li><a href =#><i class="fa fa-home icon"></i></a></li>
            <li>
            <a href =#>Leden <i class="fa fa-chevron-down"></i></a>
            <ul><li><a href=#>Info lidmaatschap</a></li></ul>
            <ul><li><a href=#>Ledenoverzicht</a></li></ul>
            <ul><li><a href=#>Ledenkaart</a></li></ul>
            </li>
            <li><a href =#>Stromingen <i class="fa fa-chevron-down"></i></a></li>
            <li><a href =#>Publicatie's <i class="fa fa-chevron-down"></i></a></li>
            <li><a href =#>Activiteiten <i class="fa fa-chevron-down"></i></a></li>
            <li><a href =#>Werkgroepen <i class="fa fa-chevron-down"></i></a></li>
            <li><a href =#>Nieuws <i class="fa fa-chevron-down"></i></a></li>
            <li><a href =#>Webshop <i class="fa fa-chevron-down"></i></a></li>
            <li><a href =#><i class="fa fa-search icon"></i></a></li>
        </ul>
        </nav>

我的 CSS 输出：

* line 9, ../sass/_header.scss */
#menu {
  font-size: 15px;
  font-family: "myriad pro";
  color: white;
  background-color: #7a76b4;
  border: 1px solid #7a76b4;
}
/* line 15, ../sass/_header.scss */
#menu ul {
  margin-left: -40px;
}
/* line 18, ../sass/_header.scss */
#menu li {
  display: inline;
  padding: 15px;
}
/* line 21, ../sass/_header.scss */
#menu li:hover {
  background-color: #5b5896;
  padding: 15px;
}
/* line 26, ../sass/_header.scss */
#menu a {
  color: white;
  text-decoration: none;
}
/* line 29, ../sass/_header.scss */
#menu a:hover {
  color: #9e9e9e;
}
/* line 32, ../sass/_header.scss */
#menu a i {
  font-size: 9px;
}
/* line 34, ../sass/_header.scss */
#menu a i.icon {
  font-size: 17px;
}

【问题讨论】：

标签： html css sass

【解决方案1】：

删除“显示：内联；”来自“li”标签的标签，它会完成我认为的工作！

【讨论】：

这是 jsfiddle，我现在删除了子菜单以便于查看。你知道该怎么做吗？ jsfiddle.net/aLhPr

【解决方案2】：

以下代码可能会根据您的需要正常工作

- jsFiddle 演示

    #menu
    {   
        height:80px;
        font-size: 15px;
        font-family: "myriad pro";
        color: white;
        background-color: #7a76b4;
        border: 1px solid #7a76b4;
    }
    /* line 15, ../sass/_header.scss */
    #menu ul
    {
        margin-left: -40px;
    }
    /* line 18, ../sass/_header.scss */
    #menu li
    {
        display: inline-block;
        padding: 15px;
        vertical-align:top;
    }
    /* line 21, ../sass/_header.scss */
    #menu li:hover
    {
        background-color: #5b5896;
        padding: 15px;
    }
    /* line 26, ../sass/_header.scss */
    #menu a
    {
        color: white;
        text-decoration: none;
    }
    /* line 29, ../sass/_header.scss */
    #menu a:hover
    {
        color: #9e9e9e;
    }
    /* line 32, ../sass/_header.scss */
    #menu a i
    {
        font-size: 9px;
    }
    /* line 34, ../sass/_header.scss */
    #menu a i.icon
    {
        font-size: 17px;
    }

    #smenu ul
    {
        display: none;
    }

    #smenu:hover #li1
    {
        display: block;}
    }
</style> </head> <body>
<nav id="menu">
    <ul id="nav">
        <li id"mmenu"><a href =#><i class="fa fa-home icon"></i></a></li>
        <li id="smenu">
        <a id="showmenu" href =#>Leden <i class="fa fa-chevron-down"></i></a>
        <ul id="li1"><li><a href=#>Info lidmaatschap</a></li></ul>
        <ul id="li1"><li><a href=#>Ledenoverzicht</a></li></ul>
        <ul id="li1"><li><a href=#>Ledenkaart</a></li></ul>
        </li>
        <li><a href =#>Stromingen <i class="fa fa-chevron-down"></i></a></li>
        <li><a href =#>Publicatie's <i class="fa fa-chevron-down"></i></a></li>
        <li><a href =#>Activiteiten <i class="fa fa-chevron-down"></i></a></li>
        <li><a href =#>Werkgroepen <i class="fa fa-chevron-down"></i></a></li>
        <li><a href =#>Nieuws <i class="fa fa-chevron-down"></i></a></li>
        <li><a href =#>Webshop <i class="fa fa-chevron-down"></i></a></li>
        <li><a href =#><i class="fa fa-search icon"></i></a></li>
    </ul>
    </nav> </body> </html>

【讨论】：