css min-width works on first level <li> lists but doesn't on second level in hierarchy

Basically problem is the <li>text</li&开发者_如何学Gogt; in the second level of the menu won't stretch, and defaults to whatever min-width I give it - if I declare min-width:30px and the text is longer it stops at 30px and wraps the text. Basically behaves like max-width would, but it happens only on the second level nested <li>. live: http://jsfiddle.net/fskbS/10/

Example css

ul#nav {
    float:left;
    height:30px;
    background:#999;
}

ul#nav li { float:left; }

ul#nav li a, #nav li a:link {
    display:block;
    min-width:30px;
    height:26px;
    padding:2px 10px;
    line-height:150%;
    border:1px solid black;
}

ul#nav li a:hover { color:#960; }

/* initially hide the first level ul dropdown */

ul#nav li ul {
    position:absolute;
    left:-9999px;
}

/* initially hide the second level ul dropdown */

ul#nav li ul ul {
    position:absolute;
    left:-9999px;
}

/* mouse overing the same li does two things: */

/* hides 3-rd ul*/

ul#nav li:hover ul ul { left:-9999px; }

/* displays second ul in hierarchy*/

ul#nav li:hover ul {
    display:absolute;
    left:auto;
    top:30px;
}

ul#nav li li:hover ul {
    display:absolute;
    left:100%;
    top:0;
    width:auto;
}

/*float:none so it displays vertically*/

ul#nav li li {
    float:none;
    min-width:30px;
    background:#C2E4EB;
    overflow:hidden;
}

/* li is targeted and bg-color gets applied but min-width won't work*/

ul#nav ul ul li {
    float:none;
    min-width:30px;
    background:#F93;
    overflow:hidden;
}

Example HTML

<ul id="nav">
  <li>
    <a href="#">German Auto</a>
    <ul>
      <li>
        <a href="#">Bayerische Motoren Werke</a>
        <ul>
          <li>
            <a href="#">Coupe Z series</a>
          </li>
          <li>
            <a href="#">Sedan X1 series</a>
          </li>
          <li>
            <a href="#">Sedan X3 series</a>
          </li>
          <li>
            <a href="#">Sedan X5 series</a>
          </li>
          <li>
            <a href="#">Sedan 7 series</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Mercedes Benz</a>
      </li>
      <li>
        <a href="#">Volks Wagen</a>
      </li>
      <li>
        <a href="#">Audi</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Shop</a>
  </li>
</ul>

You can add this:

#nav a {
    white-space:nowrap;
}

This will cause the text to only occupy one line instead of wrapping.

Demo: http://jsfiddle.net/fskbS/19/

Here are my two cents.

I recommend you stay away from this type of menu where I have to carefully maneuver my mouse to the right so I can get to click on the sub sub menu.

Just have the sub sub options below the sub and style differently(plus margin).

I took the initiation of this. And makes it easier for the user. And cut down the css.

http://jsfiddle.net/fskbS/10/

Enjoy

In my case it didn't work because I directly applied to <li>,

ul#nav li a, #nav li a:link {
      display:block;
      min-width:30px;
      height:26px;
      padding:2px 10px;
      line-height:150%;
      border:1px solid black;
    }

Here you are giving min-width to <a> tag so it worked but on the second level you are giving it directly to <li> so probably that's why it didn't work

It will be like

ul#nav li li a {
   float:none;
   min-width:30px;
   background:#C2E4EB;
   overflow:hidden;
}