CODEWITHSUNDEEP
css
Dziamid
Dziamid

Reputation: 11571

2 line menu with css

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)?

Upvotes: 2

Views: 2609

Answers (3)

Vijender Reddy
Vijender Reddy

Reputation: 156

Use the following updated CSS. It will work perfectly. 

ul.menu {
    height: 20px;
}
ul.menu li {
    display: inline;
    float:left;
}
ul.submenu {
    display:block;
    margin:0px;
    padding:0px;
}

Upvotes: 0

Ryan Kinal
Ryan Kinal

Reputation: 17732

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).

Upvotes: 1

krusty.ar
krusty.ar

Reputation: 4060

Check my answer here, I think it's similar to what you want.

EDIT: sorry, missed the css only idea, here's what I would do:

.submenu{ display:none;}
li:hover .submenu{ display: block;}

Upvotes: 1

Related Questions