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

Question

I have this menu http://codepen.io/alexandernst/pen/oxpGYQ (tried to insert it here but SO's result viewer is breaking the demo...) and I want to make the second and third level ul elements the same height as the first level ul and also start at the same position (which would be top: 0 is this concrete demo) as the first ul element.

So, said with other words, I want all ul elements to start at the tom of the row div and have 100% height.

Note that I don't know how many li elements I'll have, so I can't hardcode top values for each ul element in order to adjust it's top position.

I'd like to avoid having to use javascript, but if there is no other way I could accept an answer with JS.

Answer 1

Try giving position static to the li elements. Then when setting height: 100% to the ul element it be will relative to the parent ul instead of the parent li . So long as the ul element has position set to relative , absolute or fixed .

Add this CSS

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

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

Here is the Codepen solution: http://codepen.io/anon/pen/KzZXxv