自动宽度导航ul＆li问题

Question

我正在使用导航标签菜单。你可以看到here。 我的问题是最后的F & G菜单宽度不符合内容。而其他A到E菜单适合内容。帮助我，我不知道该怎么做。我知道这可能很简单，但我尝试过但没有解决方案。 我不想给定宽度。

HTML代码：

<div id="menu"> 
        <nav> 
         <ul> 
          <li><a href="#">A MENU</a> 
           <ul> 
            <li><a href="#">B SUB MENU</a></li> 
            <li><a href="#">C SUB MENU</a></li> 
           </ul> 
          </li> 
      <li><a href="#">D MENU</a> 
           <ul> 
            <li><a href="#">E SUB MENU</a> 
             <ul> 
            <li><a href="#">F SUB SUB MENU</a></li> 
              <li><a href="#">G SUB SUB MENU</a></li> 
             </ul> 
             </li> 
           </ul> 
          </li> 
      </ul> 
        </nav> 
       </div> 

CSS：

nav ul ul { 
    display: none; 
} 

    nav ul li:hover > ul { 
     display: block; 
    } 


nav ul { 
    background: #009EC6; 
    background: linear-gradient(top, #009EC6 0%, #006A85 100%); 
    background: -moz-linear-gradient(top, #009EC6 0%, #006A85 100%); 
    background: x -webkit-linear-gradient(top, #009EC6 0%,#006A85 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
    padding: 0 10px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    z-index: 1; 
} 
    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 

    nav ul li { 
     float: left; 
    } 
     nav ul li:hover { 
      background: #006A85; 
      background: linear-gradient(top, #006A85 0%, #009EC6 40%); 
      background: -moz-linear-gradient(top, #006A85 0%, #009EC6 40%); 
      background: -webkit-linear-gradient(top, #006A85 0%,#009EC6 40%); 

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

     nav ul li a { 
      display: block; padding: 10px 10px; 
      color: #fff; text-decoration: none; 
     } 


    nav ul ul { 
     padding: 0; 
     position: absolute; 
    } 
     nav ul ul li { 
      float: none;   
      position: relative; 
     } 
      nav ul ul li a { 
       padding: 5px 15px; 
      } 
       nav ul ul li a:hover { 
        background: #006A85; border-radius: 10px; 
       } 

    nav ul ul ul { 
     left: 100%; top:0; 
    } 

Answer 1

您可以使用white-space:nowrap在最后ul对准它们一行。