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


Tags: css,css3,navigation,navbar,menubar

Problem :

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


    CSS Howto..

    Please help me understand how to make my first jquery slider

    How to stack multiple divs on top of each other and each have a height of 100%

    how to create an alphabet letter selector that spans an entire div width

    How to add jQuery file to navigation website?

    How to style a video iFrame?

    How to find all elements with a particular CSS style, without a JS library?

    How to make
  • expand with CSS (like Apple.com)
  • How can I target a block after another block with css?

    CSS - How to remove comments and make CSS one line

    how to overwrite css height set by jquery/javascript?

    How to position an absolute div next to an element in a scrollable section, but outside the section

    how to prevent datepicker css from changing

    How to position a label using css relative to an absolute positioned input box

    Stack row 2x2 on Bootstrap using rows in same height… how?

    How to add condition in Extjs4 tpl for detecting current browser

    How do I create a CSS class Union?

    knockout.js how to bind dynamic css

    How To Do A Webkit Slide Cover Page Transition

    How to change CSS attribute value based on querystring using jQuery

    How to use jQuery to check if element breaks to the next line?

    How to center image with full height and variable width

    CSS element class - Height differs based on content, how to fix?

    how to use the CSS contains-element selector with input elements?

    How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

    How do I insert an image in HTML so that its fills up the entire screen regardless of screen size?

    How to set incremental CSS classes in each Table Cell with jQuery?

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How to asynchronously load CSS using jQuery?

    How to replace direct image calling with sprites, in JavaScript?

    HTML table-cell how to set width