title: CSS Drop-down Sub-menu Erroneously Modifying Parent Width
body: <p>I have been fiddling with CSS-based drop-down navigation on my website and ran into some trouble with the sub-menus modifying the width of the parent menus.  When a sub-drop-down is opened, the parent drop-down will enlarge to match the width.  If sub-drop-down menus are smaller than the parent, they appear to be using the width of the parent menus for their horizontal offset instead of their own width, which creates a gap.  </p>
  
  <p>I have pulled together a live example here: <a href="http://jsfiddle.net/vwLf9f3w/2/" rel="nofollow">http://jsfiddle.net/vwLf9f3w/2/</a></p>
  
  <p>Sorry for the large quantity of CSS; I have pulled the relevant code to the top. </p>
  
  <p>Here is the CSS just for my navigation:</p>
  
  <pre><code>/*    ----------- Navigation -----------    */
  
  div.nav 
  {
      display: block;
      position: absolute;
      top: 83px; 
      left: 470px;
      height: 47px; 
      width: 530px;
      background-color: transparent;
      z-index: 21;
      padding: 0px;
      margin: 0;
      font-size: 16px;
  }
  
  /*      ------    [ NAV LINKS ]    -------     */
  
  /* Primary header links */
  div.nav &gt; ul &gt; li &gt; a
  {
      display: block;
      background-color: transparent;
      text-align: center;
  
      height: 24px;
      width: 96px;
      background-color: #a9a9a9;
      border: 1px solid #666666;
      border-radius: 3px;
      margin-top: 6px;
      margin-bottom: 6px;
      margin-left: 6px;
      padding: 6px 0px 0px 0px;
  }
  div.nav &gt; ul &gt; li:hover &gt; a
  {
      background-color: #8bbbdd;
  }
  
  /* All header links */
  div.nav a
  {
      color: #000000; 
      text-decoration: none;
  }
  
  /* Header Sub-links */
  div.nav &gt; ul &gt; li li &gt; a 
  {
      display: block; 
      padding: 0px 0px;
  
      padding-top:    6px;
      padding-bottom: 6px;
      padding-left:   20px;
      padding-right:  20px;
      margin-top:  0px;
      margin-left: 0px;
      background:  #a9a9a9;
      color:       #000000;
  }
  div.nav &gt; ul &gt; li li &gt; a:hover, div.nav &gt; ul ul li:hover &gt; a
  {
      background: #8bbbdd;
  }
  
  /*      ------    [ NAV LISTS ]    -------     */
  
  /* Primary navigation items */
  div.nav &gt; ul &gt; li 
  {
      display: inline-block;
      background-color: transparent;
      vertical-align: top; /* here */
      max-width: 104px;
      overflow: show;
  }
  
  /* Primary navigation list */
  div.nav &gt; ul
  {
      display: inline-block;
      width: 650px;
      margin: 0px;
  }
  
  /* Secondary navigation lists */
  div.nav &gt; ul ul
  {
      z-index: 0;
      white-space:nowrap;
  
      border: 1px solid #666666;
      border-radius: 3px;
  
      padding: 0 0 0 0;
      list-style: none;
      position: relative;
  
      display: none;
      background-color: transparent;
  
      background: URL(images/blank.gif);/*#000;transparent; IE FIX*/
      padding: 0;
      left: 6px;
      top: -3px;
      position: relative; 
      margin-bottom: 0px;
      margin-left: 0px;
      width: auto;
      height: auto;
  }
  div.nav ul li:hover &gt; ul 
  {
      display: inline-block;
  }
  
  /* Secondary list items */
  div.nav &gt; ul &gt; li li
  {
      max-height: 31px;
  }
  
  /* Tertiary menu list */
  div.nav &gt; ul ul ul
  {
      top: -36px;
      left: -100%;
      position: relative;
  }
  </code></pre>
  
  <p>And here is the relevant HTML:</p>
  
  <pre><code>...
  &lt;div class="nav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="?page="&gt;Home&lt;/a&gt;
                  &lt;/li&gt;&lt;li&gt;&lt;a href="javascript:void(0);"&gt;Tech&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 2&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;An Item&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Some Other Item&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;And Yet Another!&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;I Am Running Out of Ideas&lt;/a&gt;
                                      &lt;ul&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Even More To Show Expansion&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;And More&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;And More!&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;One Last Item&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 3&lt;/a&gt;&lt;/li&gt;    
                          &lt;li&gt;&lt;a href="#"&gt;Subject 4&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;&lt;li&gt;&lt;a href="javascript:void(0);"&gt;Personal&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 1&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;1111&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;2222&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;3333&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;4444&lt;/a&gt;
                                      &lt;ul&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;5555&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;&lt;li&gt;&lt;a href="javascript:void(0);"&gt;Software&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;&lt;li&gt;&lt;a href="javascript:void(0);"&gt;Contact&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subject 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  ...
  </code></pre>
  
  <p>To summarize: How can I get each navigation sub-menu to have its own size that will not modify the size of other menus?  And, how can I get the sub-menus to reference their own width rather than their parents' to prevent gaps? </p>
  
  <p>All suggestions are welcome; my apologies for the unpolished code. </p>