Pure CSS Troisième niveau du menu déroulant : pour correspondre à la largeur de son plus grand frère.

Question

Pourquoi la largeur de la troisième liste de mon menu déroulant ne correspond-elle pas à la largeur de sa plus grande longueur de texte ? J'ai supprimé complètement la largeur pour que, par défaut, la largeur de la liste corresponde à sa longueur de texte la plus longue.

Voici le 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>

Voici le 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;
}

Ce site est le lien pour voir la page.

Answer 1

Définir un white-space: nowrap au niveau 3 ul