Nav ul & li проблема для автоматической ширины

Question

Я использую nav tag для меню. Который вы можете видеть 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, чтобы выровнять их в одну линию.