Search code examples
cssnavigationnavbarmenubar

How can I use min-width 100% and still have expanding by content?

I have a menubar which is fine, but I want the dropdown menus to have a minimum width of 100% of the link item above it. It is easier illustrated with images:

This is fine:
1

But I want this one to be at least 100% wide:
2

What I don't want is for them to be exactly 100% wide. I know how to do that, but I've been struggling with making them all at least 100% wide for a long while, and I can't figure it out.

The main section of css I'm dealing with is the #menu > ul > li > ul. I have tried applying min-width: 100% to it, but they all just become exactly 100%. Why doesn't this work?

Here's a fiddle showing a live demo of my problem, and it includes all the css for the menu.

Solution

  • That’ll need just a couple of small adjustments.

    First of all, position your li relative, so that they explicitly become the anchor point for the sub-level ul (this is necessary, so that the ul can take their min-width from their parents):

    #menu > ul > li {
    position:relative;
}

    Second, position the ul to the left of their parent li, and give them a min-width:

    #menu > ul > li > ul {
  left:0;
  min-width:100%;
}

    Forbid the a elements inside the sub-level ul from breaking if the width of the element is not sufficient, by using the white-space property:

    #menu > ul > li > ul > li > a {
    white-space:pre;
}

    http://jsfiddle.net/jLLJu/4/ (I added my modifications to the bottom of your CSS for clarity; feel free to move them up to where the rest of your formattings for the elements concerned are.)