使用scss和下面的滑块将菜单项堆叠在一起

Question

我有一个菜单，但我希望子菜单堆叠在它下面。 我试过了，但是所有的菜单都在同一个地方。

任何人都知道该怎么做？

我的jsfiddle：

http://jsfiddle.net/aLhPr/

我在菜单下面有一个滑块，所以它需要位于滑块的顶部。

我的scss：

#menu {
  height:48px;
  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;
            }
        }
    }
}

由于

Answer 1

我不确定这是不是你想要的。但是我通过在子菜单项上使用position: absolute创建了一个小提琴，在第一个菜单项（Leden）上有子菜单项。

JSFIDDLE

请注意，我还移动了您的A代码，因此它们位于LI代码中。这是因为让它们围绕LI标记是无效的HTML。