html - 使用 scss 和它下面的 slider 将菜单项堆叠在一起

Question

我有一个菜单，但我希望子菜单堆叠在它下面。 我试过了，但所有菜单项都在同一个位置。

有人知道该怎么办吗？

我的 jsfiddle:

http://jsfiddle.net/aLhPr/

我在菜单下面有一个 slider ，所以它需要在 slider 的顶部。

我的 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 创建了一个 fiddle ，您的第一个菜单项 (Leden) 上有子菜单项。

JSFIDDLE

请注意，我还移动了您的 A 标签，因此它们位于 LI 标签内。这是因为将它们放在 LI 标记周围是无效的 HTML。