使用 scss 和其下方的滑块将菜单项堆叠在一起答案

【问题标题】：Stacking menu items under eachother with scss and a slider under it使用 scss 和其下方的滑块将菜单项堆叠在一起
【发布时间】：2014-01-31 21:11:26
【问题描述】：

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

有人知道该怎么做吗？

我的 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;
            }
        }
    }
}

谢谢

【问题讨论】：

标签： html css sass

【解决方案1】：

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

JSFIDDLE

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

【讨论】：