title: Drop down Menu Width
body: <p>I have a demo here <a href="http://www.ttmt.org.uk/nav" rel="nofollow">www.ttmt.org.uk/nav</a></p>
  
  <p>It's a simple list navigation with drop downs</p>
  
  <p>The 'Our Work' drop down has another drop down on the last button.</p>
  
  <p>The drop downs are wider than the parent buttons but the drop under the last button of 'Our Work' isn't wide enough for the text.</p>
  
  <p>Why are these button not wide enough.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;meta charset="UTF-8"&gt;  
  
        &lt;!--css--&gt;
        &lt;style&gt;
  
          body{
              background:#eee;
              font-family:helvetica, sans-serif;
          }
          nav{
              margin:50px;
              float:left;
          }
  
          nav ul ul{
              display:none;
          }
          nav ul li:hover &gt; ul{
              display:block;
          }
          nav ul{
              list-style:none;
              position:relative;
              display:inline-table;
          }
          nav ul:after {
              content: "";
              clear: both; 
              display: block;
          }
  
          nav ul li{
              float:left;
          }
          nav ul li a{
              display:block;
              padding:20px;
              text-decoration:none;
              background:#fff;
              color:red;
              margin:0 5px 0 0;
              position:relative;
          }
          nav ul li a span{
              display:inline-block;
              width:14px;
              height:7px;
              background:blue;
              position:absolute;
              bottom:10px;
              left:50%;
              margin-left:-7px;
          }
          nav ul ul{
              padding:0;
              position:absolute;
              top:100%;
          }
          nav ul ul li{
              float:none;
              position:relative;
          }
          nav ul ul li a{
              background:red;
              color:#fff;
              margin:0 0 5px 0;
          }
          nav ul ul ul{
              position:absolute;
              left:100%;
              top:0;
          }
  
        &lt;/style&gt;
  
  
        &lt;title&gt;Title of the document&lt;/title&gt;
        &lt;/head&gt;
  
      &lt;body&gt;
  
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Us &gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;About Us Bigger Button&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About Us Us&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About Us Us Us&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About Us Us Us Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Our Work &gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Our Work One&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Our Work Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Our Work Three &gt;&lt;/a&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Our Work Three Sub Button&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Our Work Three Another Sub Button&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;  
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
  
  
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>