title: Why are my navigation's sub-menus changing widths and how do I fix it?
body: <p>Whenever I open up a submenu or subsubmenu in my navigation, the width of the parent menu changes. What am I doing wrong here; how do I prevent that? <strong>My goal was to have the sub-menus have a min-width equal to the menu above it.</strong> Also, why isn't the bottom border lining up properly on some menu items, but looks great on others? I need this menu to look nice and polished before I show it off to the client. This just won't do.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="navigation-wrapper"&gt;
      &lt;div id="navigation"&gt;
          &lt;ul id="nav"&gt;
              &lt;li class="n1"&gt;
                  &lt;a href="PrimaryLink"&gt;Main Link&lt;/a&gt;
                  &lt;ul class="subnav"&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                          &lt;ul class="subsub"&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="n2"&gt;
                  &lt;a href="PrimaryLink"&gt;Main Link&lt;/a&gt;
                  &lt;ul class="subnav"&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                          &lt;ul class="subsub"&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="n3"&gt;
                  &lt;a href="PrimaryLink"&gt;Main Link&lt;/a&gt;
                  &lt;ul class="subnav"&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                          &lt;ul class="subsub"&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="n4"&gt;
                  &lt;a href="PrimaryLink"&gt;Main Link&lt;/a&gt;
                  &lt;ul class="subnav"&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                          &lt;ul class="subsub"&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="n5"&gt;
                  &lt;a href="PrimaryLink"&gt;Main Link&lt;/a&gt;
                  &lt;ul class="subnav"&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="SecondaryLink"&gt;Secondary Link&lt;/a&gt;
                          &lt;ul class="subsub"&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                              &lt;li&gt;&lt;a href="TertiaryLink"&gt;Tertiary Link&lt;/a&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>/* ----------------------------
  NAVIGATION 
  ------------------------------*/
  #navigation-wrapper {
      width: 100%; 
      background: #f6f6f6 url(../images/sprites_bgs.png) repeat-x top; 
      border-bottom: 4px solid #ccc;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 100;
  }
  #navigation {
      width: 950px;
      margin: 0 auto; 
      border: 0px solid #9C0;
      height: 64px;
      overflow: hidden;
  }
  #nav,
  #nav ul {
      list-style: none;
  }
  #nav {
      float: left;
  }
  
  #nav &gt; li {
      float: left;
      height: 64px;
  }
  #nav li a {
      display: block;
      text-decoration: none;
  }
  #nav &gt; li &gt; a {
      line-height: 64px;
      text-align: center;
  }
  .n1 { width: 219px; }
  .n2 { width: 228px; }
  .n3 { width: 94px; }
  .n4 { width: 154px; }
  .n5 { width: 255px; }
  #nav ul {
      position: absolute;
      display: none;
      z-index: 999;
  }
  #nav li:hover ul.noJS {
      display: block; 
  }
  
  /* Main menu
  --------------*/
  #nav {
  /* font-family: Arial; */
      font-size: 16px; /* 12px */
      background: transparent; /* #2f8be8 */
  }
  #nav &gt; li &gt; a {
      color: #555; /* #fff */
      font-weight: 700;
      border-right: 1px solid #eee;
      text-shadow: 1px 1px 2px #fff;
  }
  #nav &gt; li:hover &gt; a {
      background: #00275E;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
  }
  #nav &gt; li &gt; a.last {
      border-right: 0;
  }
  
  /* Submenu
  -----------*/
  #nav ul {
      background: #00275E;
      width:auto;
  }
  #nav ul &gt; li {
      max-height: 37px;
      white-space: nowrap;
  }
  #nav ul li a {
      border-bottom: 1px solid #ccc;
      color: #fff;
      font-size: 14px; /* 12px */
      padding: .6em .6em;
  }
  #nav ul li:hover a {
      background: #0085BD;
      color: #fff;
  }
  
  /* Sub-submenu
  -----------*/
  #nav ul li &gt; ul {
      left: -99999em;
      position: absolute;
      white-space: nowrap;
  }
  #nav &gt; li:hover &gt; ul {
      left: auto;
  }
  #nav &gt; li li:hover &gt; ul {
      bottom: 37px;
      left: 100%;
      position: relative;
  }
  #nav &gt; li li:hover &gt; ul a {
      background: #00275E;
      color: #fff;
  }
  #nav &gt; li li:hover &gt; ul a:hover {
      background: #0085BD;
      color: #fff;
  }
  
  /* arrow hover styling */
  #nav ul li a:first-child:nth-last-child(2):before { 
      content: "";
      float: right;
      height: 0;
      position: relative;
      top: 8px;
      width: 0;
      border: 5px solid transparent;
  }
  #nav li li &gt; a:first-child:nth-last-child(2):before {
      border-left-color: #fff;
      margin: -5px 0 0 10px;
  }
  </code></pre>