Question

It is probably easy to implement, but hard to name it. I am struggling to display this layout:

<ul class='menu'>
  <li>
    <a>item1</a>
    <ul class='submenu'> ... </ul>
  <li>
  <li><a>item2</a></li>
</ul>

in 2 horizontal lines: first line is ul.menu and second line is ul.submenu

Css:

ul.menu
{
  position: relative;
  height: 20px;
}
ul.menu li {
  display: inline;
}
ul.submenu {
  top: 20px;
  left: 0px;
  position: absolute;
}

Is there a way to do it without position:absolute, so that menu container is in the flow of the document (there is no gap is submenu isn’t present)?

Answer 1

I’ve set up a jsFiddle for this.

If I understand the problem correctly, you want a two-line menu, the submenu of which is still in the document flow, so the page will adjust when there is no submenu.

The catch is this: Without position: absolute, the parent <li> elements will expand to contain the submenu <ul> elements. This will leave your top-level menu items will odd spacing, depending on the width of your submenu elements.

If this isn’t a problem, then the above jsFiddle should solve the issue. If it is a problem, then there is a little more work to do (and I don’t have a solution quite yet).