Pure CSS Drop down menu's 3rd tier: to match the width of its widest sibling.

Question

Hi,

I wonder why the width of the 3rd list in my drop down menu does not have the width of its longest text length. I have removed the width completely so that by default, the width of the list can match its longest text length.

Does anyone know how to fix this??

This is the html,

<div id="footer">
  <ul>                           
    <li><a href="#" class="current-menu-footer">Home</a>
      <ul>
        <li><a href="#">List 2.1</a></li>
        <li><a href="#">List 2.2</a></li>
        <li><a href="#">List 2.3</a></li>
        <li><a href="#">List 2.4 this list has the width of its longest text length.</a></li>
      </ul>
    </li>
    <li><a href="#">Quack Project</a></li>
    <li><a href="#">Field Game</a></li>
    <li><a href="#">Ask Dr. Quack</a>
    </li>
    <li><a href="#">Links Links</a></li>
    <li><a href="#">Duck Book</a>
      <ul>
        <li><a href="#">List 2.1</a></li>
        <li><a href="#">List 2.2</a></li>
        <li><a href="#">List 2.3</a>
          <ul>
            <li><a href="#">List 3.1 the dropdown list should have he width of its longest text length.</a></li>
            <li><a href="#">List 3.2</a></li>
            <li><a href="#">List 3.3</a></li>
          </ul>

        </li>
      </ul>
    </li>
  </ul>    
</div>

This is the css:

#footer {
  position:fixed;
  left:0px;
  bottom:0px; /* use this condition if the menu is fixed to the bottom */
  /*top:0; use this condition if the menu is fixed to the top */
  width:100%;
  background-color:#b8b2b2;
  color:#ffffff;
  padding:0px 0px 0px 20px;
  overflow:visible;
}


#footer > ul > li > ul {
  bottom:21px; /* use this condition if the menu is fixed to the bottom */
}

#footer  .current-menu-footer {
  color:#000000;
}

/**************************************/

/* drop down menu global */  

#footer li {
  /* 
    Use 'position: relative' for the third level drop down,
    may only consider this only if the menu is fixed to the top 
  */
  /*position: relative;*/
  /*min-height: 1px;  Sophie Dennis contribution for IE7 */
  /*vertical-align: bottom;  Sophie Dennis contribution for IE7 */
}

#footer a {
  display: block;
  text-decoration: none;
  border:0px solid #0066FF;
}

/* drop down menu local level 1 */

#footer  > ul > li {
  float:left;
  margin:0px 15px 0px 0px;
}

#footer > ul > li > a {
  padding: 4px 8px 4px 0px;
  list-style-type:disc;
  list-style-position:inside;
  display:list-item;
  text-decoration:none;
  color:#ffffff;
  border:0px solid #0066FF;
}

#footer  > ul > li > a:hover {
  color:#000000;
}

/* drop down menu local level 2 */

#footer > ul > li > ul {
  display: block;
  position: absolute;
}

#footer > ul > li > ul > li {
  float: none;
}

#footer  > ul > li > ul > li > a {
  padding:4px 15px 4px 15px;
}

#footer > ul > li:hover ul ,
#footer > ul > li.hover ul  {
  display: block;
}

#footer  > ul > li:hover li > a, 
#footer  > ul > li.hover li > a {
  background-color: #b8b2b2;
  border-bottom: 1px solid #ffffff;
  color: #000000; 
  /*width:200px;  use a fixed width to fix IE if use 'position: relative' on all <li>*/
}

    #footer  > ul > li > ul > li > a:hover {
  color:#000000;
  background-color:#cccccc;
}

/* drop down menu local level 3 */

#footer > ul > li > ul > li > ul {
  display: block;
  position: absolute;
  left:100%;
  /*top:0; use this condition if the menu is fixed to the top */
  bottom:0; /* use this condition if the menu is fixed to the bottom */
  border-left: 1px solid #ffffff;
  border: 1px solid #000;
  overflow: auto;
}

#footer > ul > li > ul > li > ul > li {
  float: none;
}

#footer  > ul > li > ul > li > ul > li > a {
  padding:4px 15px 4px 15px;
}

/*
  don't display the 3rd level drop down 
  when it hovers on 2nd level.
*/
#footer > ul > li:hover ul  ul,
#footer > ul > li.hover ul ul {
  display: none;
}

#footer > ul > li  > ul > li:hover ul,
#footer > ul > li > ul > li.hover ul {
  display: block;
}  

#footer  > ul > li > ul > li > ul > li > a:hover {
  color:#000000;
  background-color:#cccccc;
}

This is the link to see the page, http://www.lauthiamkok.net/tmp/css/list/list.htm

many thanks, Lau

Answer 1

Set a white-space: nowrap on the level 3 ul