纯 CSS 下拉菜单的第三层：匹配其最宽同级的宽度

Question

为什么我的下拉菜单中第三个列表的宽度没有其最长文本长度的宽度？我已经完全删除了宽度，以便默认情况下列表的宽度可以匹配其最长的文本长度。

这是 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>

这是 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;
}

Answer 1

在第 3 层 ul 上设置一个 white-space: nowrap