html - 使第二级 ul 成为第一个 ul 而不是父 li 的 100% 高度

Question

我有这个菜单 http://codepen.io/alexandernst/pen/oxpGYQ (试图将其插入此处，但 SO 的结果查看器破坏了演示...)我想制作第二和第三级 ul与第一层高度相同的元素ul并且也从与第一个 ul 元素相同的位置开始(这将是 top: 0 是这个具体的演示)。

所以，换句话说，我想要所有ul从 row 的桶鼓开始的元素div 并具有 100% 的高度。

请注意，我不知道有多少 li我将拥有的元素，所以我不能硬编码 top每个 ul 的值元素以调整它的top位置。

我想避免使用 javascript，但如果没有其他方法我可以接受 JS 的答案。

Answer 1

尝试将 static 位置赋予 li 元素。然后当 height: 100% 设置为 ul 元素时，它将相对于父 ul 而不是父 li。只要 ul 元素的位置设置为 relative、absolute 或 fixed。

添加此 CSS

#cssmenu ul li {
  position: static !important;
}

#cssmenu ul ul {
  top: 0;
  height: 100%;
  background: #1b9bff;
}

这是 Codepen 解决方案:http://codepen.io/anon/pen/KzZXxv