Horizontal Menu - full width of li's child ul's

Question

I've got a horizontal menu with table/table-cell tags:

.menu {
  display: table;
  width: 100%;
}

.menu li {
  display: table-cell;
}

<!doctype html>
<html>
  <body>
    <div style="width: 960px">
      <ul class="menu">
       <li><span>Selected Menu Item</span></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
      </ul>
    </div>
  </body>
</html>

This is working fine, but I also have submenus like

<ul class="menu">
  <li><span>Selected Menu Item</span></li>
  <li><a href="#item">Another Item</a>
    <ul class="submenu">
      <li><a href="#sub">Submenu Item</a></li>
      <li><a href="#sub">Submenu Item</a></li>
    </ul>
  </li>
 </ul>

Now normally I would just make the first-level li's position: relative and the second-level ul position: absolute and give it the same size as I gave the li-elements; but in this case I do not have a fixed with for the li's, so I tried this:

.menu li {
  position: relative;
}

ul.submenu {
  position: absolute;
  width: 100%;
}

But it is not - as I would expect - expanding to the 100% width of its parent (li) but rather gaining the width of the nearest specified element (in this case the div with width 960px I think, but it might also be larger).

My question is: Is it possible to expand the second-level ul-element to the width of its parent, the table-cell styled li without falling back to JavaScript?

I am aware of the fact, that I'd have to write a Script for disabled browsers, like IE<=7. Here is a running example: http://jsfiddle.net/hy73d/

Edit #1: It was brought to my attention, that this actually works in webkit-browsers and opera; so the real question would be, is there a solution for gecko?

This problem does only apply in Firefox. Chrome displays it the way you (probably) want it to be. — YMMD, Jul 06 '12 at 09:00

score 3 · Accepted Answer · edited May 23 '17 at 11:44

3

Firefox won't let you give a relative position to table-cells. Use another element inside of your td and make it relatively positioned:

<ul class="menu">
  <li><span>Selected Menu Item</span></li>
  <li><a href="#item">Another Item with Sub</a>
    <div>
      <ul class="submenu">
        <li><a href="#sub">Submenu Item</a></li>
        <li><a href="#sub">Submenu Item</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#item">Another Item</a></li>
  <li><a href="#item">Another Item</a></li>
</ul>

And of course only apply the CSS rules to your new div:

.menu li {
  display: table-cell;
}
.menu li div {
  position: relative;
  background: #444;
}

This will work better in all browsers.

edited May 23 '17 at 11:44

Community

1
1

answered Jul 06 '12 at 09:20

YMMD

3,730
2
32
43

It is sad, that you have to use additional markup for firefox; but thank you for your solution! – marc Jul 06 '12 at 09:46
You're right, but that's the natural consequence from using a hack like the one with `table-cell`. A floated `li` as usual would never have behaved like this. :-) But of course I see your point that you cannot use floats in order to dynamically fill the whole width of the `ul`. I'm glad to help! – YMMD Jul 06 '12 at 11:04

score 0 · Answer 2 · answered Jul 06 '12 at 09:52

Working with your code I did understand why the ul is expanding, its because its being positioned absolute to the body and its width being 100% is matching the width of the body. I rather find it more logical than the behaviour of chrome. Now, changing the position to relative make the container ul realize its holding another ul so its li elements expand to cover it, have a look http://jsbin.com/iwesoc/2/edit#preview But the problem could not be solved merely by setting the height of other li's to 0. Because they are inheriting the height of the ul. So, the closest I could get is this solution http://jsbin.com/iwesoc/2/edit#preview . Maybe, its of some use.

Horizontal Menu - full width of li's child ul's

2 Answers2