title: CSS Menu children forcing parents to resize
body: <p>I am currently using the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrap"&gt;
    &lt;ul class="navbar"&gt;
      &lt;li&gt;&lt;a href="#"&gt;COMPARE PLANS&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;BENEFITS&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;LARGE CORPORATES&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;SMALL &amp; MEDIUM&lt;br&gt; BUSINESSES&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;ENTREPRENEURS &amp;&lt;br&gt; START-UPS&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;EDUCATION &amp;&lt;br&gt; NON-PROFIT&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;WEB DEVELOPERS &amp;&lt;br&gt; AGENCIES&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;ARTISTS &amp;&lt;br&gt; CELEBRITIES&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;GET STARTED&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;.NET&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;PHP&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;FACEBOOK&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And <strong>CSS</strong></p>
  
  <pre><code>#wrap {
      width: 100%;
      height: 16px;
      margin: 0;
      z-index: 99;
      position: relative;
      color:#2C2C2C;
  }
  .navbar {
      height: 16px;
      padding: 0;
      margin: 0;
      float:right;
      margin-top:20px;
  }
  .navbar &gt; li {
      height: auto;
      float: left;
      text-align: center;
      list-style: none;
      font: 12px Verdana, Arial, Helvetica, sans-serif;
      padding: 0;
      margin-left:17px;
  }
  .navbar a {
      text-decoration: none;
      color: black;
      display: block;
  }
  .navbar &gt; li:hover {
      color: #6D4B78;
  }
  .navbar &gt; a:hover {
      color: #6D4B78;
  }
  .navbar li ul {
      display: none;
      height: auto;
      margin: 0;
      padding: 0;
      background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
      border: 1px solid #E0E0E0;
  }
  .navbar li:hover ul {
      display: block;
  }
  .navbar li ul li {
      min-height:12px;
      padding: 8px 5px;
  }
  .navbar &gt; li &gt; ul &gt; li:hover {
      background: none repeat scroll 0 0 #664670;
      color:#FFFFF;
  }
  </code></pre>
  
  <p>My problem is this:</p>
  
  <p>When I hover on <em>Benefits</em>, the element is re-sizing. Essentially, it is growing to match the width of its child elements (the <code>LI</code>s in the drop-down) which are larger than it.</p>
  
  <p>I want the <em>Benefits</em> element to be fixed-width, and I haven't allotted any sizing to the <code>UL</code> elements.</p>
  
  <p>To clarify, I would like my overflow to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/BTMoE.png" alt="enter image description here"></p>
  
  <p>Currently, though, when not hovering, I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/vZQPx.png" alt="enter image description here"></p>
  
  <p>And when hovering, I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/DiTfL.png" alt="enter image description here"></p>
  
  <p>What do I need to do to fix it?</p>