title: Issue with multiple levels ul li menu
body: <p>I made a multiple levels menu by <code>ul</code> and <code>li</code>,but the second level text breaks in 2 lines like below picture :</p>
  
  <p><img src="https://i.stack.imgur.com/mWOsM.jpg" alt="enter image description here"></p>
  
  <p><strong>Note :</strong> I can't use static width for second level menu (<code>li2 class</code>),because texts size is dynamic in this level and it can be 1 word or many words. </p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="top"&gt;
          &lt;ul class="ul1"&gt;
              &lt;li class="li1"&gt;home&lt;/li&gt;
              &lt;li class="li1"&gt;accessories
                      &lt;ul class="ul2"&gt;
                          &lt;li class="li2"&gt;cases and protectors
                              &lt;ul class="ul3"&gt;
                                  &lt;li class="li3"&gt;&lt;a href="#"&gt;case 1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="li3"&gt;&lt;a href="#"&gt;case 2&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>body {
      direction: rtl;
      margin: 0;
  }
  
  .top {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      height: 48px;
  }
  
  .ul1 {
      padding: 0;
      margin: 0 auto 0 auto;
      display: table;
      height: 48px;
      list-style: none;
      background-color: #bdbdbd;
  }
  
  .li1 {
      padding: 0 20px 0 20px;
      margin: 0;
      line-height: 48px;
      float: right;
      border: solid 1px #FFF;
      position: relative;
  }
  
      .li1:hover .ul2 {
          display: block;
      }
  
  .ul2 {
      padding: 0;
      margin: 0;
      list-style: none;
      background-color: #ffd800;
      display: none;
      position: absolute;
      top: 49px;
      right: 0;
      width: auto;
  }
  
  .li2 {
      padding: 0;
      margin: 0;
      height: 48px;
      width: auto;
      line-height: 48px;
      background-color: #808080;
      display: block;
  }
  .ul3
  {
      display:none;    
  }
  </code></pre>
  
  <p>and here is a live <a href="https://jsfiddle.net/7Lyodun6/" rel="nofollow noreferrer">demo</a>,what am I doing wrong?</p>