title: Drop-down menu CSS padding on <li> extends past container
body: <p>I've got a CSS-only drop-down menu working just like I want it to, except I have to surround the text of each element with a &lt;div&gt;.  The problem is that padding I apply to the &lt;li&gt; elements causes the element to extend outside the normal bounds of the list (<a href="http://goemaat.dontexist.com/BadSample.png" rel="nofollow">pic</a>).  Is there any way to make this work without using divs?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;CSS Menu Test&lt;/title&gt;
  &lt;style&gt;
  div.menu { width: 1200px; background-color: #f8f8f8 }
  div.menu a { text-decoration: none; color: Black; padding: 0; margin: 0 }
  div.menu li { cursor: pointer; display:block; position: relative }
  div.menu ul:first-child li { float: left; margin-right: 10px }
  div.menu ul { list-style: none; margin: 0; padding: 0; float: left; background-color: #f4f4f4 ; display: block}
  div.menu ul.childmenu { border: solid 1px black }
  div.menu ul.childmenu li { width: 100% }
  div.menu ul ul { display: none }
  div.menu ul li:hover &gt; div &gt; ul { display: block; position: absolute; left: 0% }
  div.menu ul li:hover &gt; ul { display: block; position: absolute; left: 0% }
  div.menu ul.childmenu li:hover &gt; ul { display: block; position: absolute; left: 100%; top: 0% }
  div.menu li:hover {  background-color: #88bbdd }
  
  div.menu div { padding: 12px; }
  /* would like to replace div.menu div with this:
  div.menu li { padding: 12px; }
  */
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li class="selected"&gt;&lt;div&gt;Services&lt;/div&gt;
              &lt;ul class="childmenu"&gt;
                  &lt;li&gt;
                      &lt;div&gt;Ally&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div&gt;Business&lt;/div&gt;
                      &lt;ul class="childmenu"&gt;
                          &lt;li&gt;&lt;div&gt;Accounting&lt;/div&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;div&gt;Administrative&lt;/div&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;div&gt;Legal&lt;/div&gt;
                              &lt;ul class="childmenu"&gt;
                                  &lt;li&gt;&lt;div&gt;Incorporation&lt;/div&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;div&gt;Takeovers&lt;/div&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;div&gt;Workers&amp;nbsp;Comp&lt;/div&gt;&lt;/li&gt;
                              &lt;/ul&gt;
  
                          &lt;/li&gt;
                          &lt;li&gt;&lt;div&gt;Communication&lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;div&gt;Personal&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;div&gt;Company&lt;/div&gt;&lt;ul class="childmenu"&gt;
              &lt;li&gt;&lt;div&gt;Contact&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;div&gt;Employment&lt;/div&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;br style="clear: both" /&gt;
  &lt;/div&gt;
  &lt;h1&gt;Content&lt;/h1&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><em><strong>edit</em></strong>
  The css box-sizing property can be used to tell the browser that 100% includes padding and borders.  The default of content-box means the 100% refers to the content only and the padding and borders will make it larger (<a href="http://plnkr.co/edit/WKUvjJJSPQJ6hWAqbPhK?p=preview" rel="nofollow">plunker</a>):</p>
  
  <pre><code>div.menu li { box-sizing: border-box; }
  </code></pre>