Absolutely positioned element's width constrained when parent is relative

Question

I have a piece of CSS implementing a click suckerfish menu.

The markup:

<table>
<tr>
<td>
<div class="bodywrapper">
<a class="button" href="#">
   <ul class="menu">
      <li>test test test</li>
      <li>test test test test test test test test test test test test test test test</li>
   </ul>
</a>
</div>
</td>
</tr>
</table>

Styles:

td{
   width: 80px;
}

.button{
  position: relative;
  display: inline-block;
  background-color: red;
  width: 10px;
  height: 27px;

}

.button:focus .menu, .button:active .menu{
  display: block;
}

.menu{
  display: none;
  position: absolute;
  min-width: 99px;
  max-width: 700px;
  width: auto;
  border: 1px black solid;
  margin-top: 27px;
}

---

Update, the above is actually contained within a table cell of fixed with

And a fiddle: http://jsfiddle.net/dAAXp/3/

The problem: I want this style definition to be used across the whole application. Therefore, the length of the text in the <li> will vary. However, the behaviour I want is that the menu has a minimum and maxmium width. I have set this using min-width and max-width for .menu. But for some reason, even if the content in the <li> is less than the max-width, the width of the menu is constrainted to the min-width.

Could someone tell me why this is happening?

Answer 1

EDIT: See bottom for answer to change in question (the solution is exactly the same)

The reason is that the A is the first positionable (relative) block that the UL can expand into. Because the anchor is constrained to 10px the contained UL can only fill according to that anchors box dimensions.

What you need to do is remove the position:relative from the anchor, add another 'invisible' container and set its position relative then your UL can expand upto the size limit of that element. see this fiddle for a fixed version

In 'english' this is what your css says:

UL: Ooh okay so my width is 100% (as you have not set width) of first parent marked with relative... Right so the Anchor above me is marked relative so my 100% width is 10px... but wait my min-width is 99px so I shall honour that.

UPDATE:

See fiddle with wrapper moved outside the table

The logic is exactly the same as in first - you could probably set position relative on the table as it's container AS LONG AS its width is 100% or greater than your required min/max widths of the contained child.

On a side note once you get to the point where you cannot have a parent width bigger than required you will have to start looking at absolute positioning and breaking the element out of the parent (but i'll leave that for now)

FOR THE SEMANTIC AMONG YOU:

I have added div wrapper - you can easilty apply this behaviour to any parent (i.e. the table/tr/td as long as it is wider than you need the min-max width @phpdev but once again if you reach the point where you parent is just not wide enough then you may have to break semantics