Home/ Questions/Q 8189797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:24:13+00:00

I’ve got a horizontal menu with table/table-cell tags: .menu { display: table; width: 100%;

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0