Почему подменю моей навигации меняет ширину и как ее исправить?

Question

Когда я открываю подменю или subsubmenu в моей навигации, изменяется ширина родительского меню. Что я здесь делаю неправильно? как я могу это предотвратить? Моя цель состояла в том, чтобы подменю имели минимальную ширину, равную меню над ним. Кроме того, почему нижняя граница не выравнивается правильно на некоторых элементах меню, но отлично смотрится на других? Мне нужно, чтобы это меню выглядело красиво и отполировано, прежде чем я покажу его клиенту. Этого просто не будет.

Мой HTML:

<div id="navigation-wrapper"> 
    <div id="navigation"> 
     <ul id="nav"> 
      <li class="n1"> 
       <a href="PrimaryLink">Main Link</a> 
       <ul class="subnav"> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
         <ul class="subsub"> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="n2"> 
       <a href="PrimaryLink">Main Link</a> 
       <ul class="subnav"> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
         <ul class="subsub"> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="n3"> 
       <a href="PrimaryLink">Main Link</a> 
       <ul class="subnav"> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
         <ul class="subsub"> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="n4"> 
       <a href="PrimaryLink">Main Link</a> 
       <ul class="subnav"> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
         <ul class="subsub"> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="n5"> 
       <a href="PrimaryLink">Main Link</a> 
       <ul class="subnav"> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
        </li> 
        <li> 
         <a href="SecondaryLink">Secondary Link</a> 
         <ul class="subsub"> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
          <li><a href="TertiaryLink">Tertiary Link</a> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <div class="clear"></div> 
    </div> 
</div> 

Мой CSS:

/* ---------------------------- 
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 > li { 
    float: left; 
    height: 64px; 
} 
#nav li a { 
    display: block; 
    text-decoration: none; 
} 
#nav > li > 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 > li > a { 
    color: #555; /* #fff */ 
    font-weight: 700; 
    border-right: 1px solid #eee; 
    text-shadow: 1px 1px 2px #fff; 
} 
#nav > li:hover > a { 
    background: #00275E; 
    color: #fff; 
    text-shadow: 1px 1px 2px #000; 
} 
#nav > li > a.last { 
    border-right: 0; 
} 

/* Submenu 
-----------*/ 
#nav ul { 
    background: #00275E; 
    width:auto; 
} 
#nav ul > 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 > ul { 
    left: -99999em; 
    position: absolute; 
    white-space: nowrap; 
} 
#nav > li:hover > ul { 
    left: auto; 
} 
#nav > li li:hover > ul { 
    bottom: 37px; 
    left: 100%; 
    position: relative; 
} 
#nav > li li:hover > ul a { 
    background: #00275E; 
    color: #fff; 
} 
#nav > li li:hover > 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 > a:first-child:nth-last-child(2):before { 
    border-left-color: #fff; 
    margin: -5px 0 0 10px; 
} 

Answer 1

Похоже, мой ...

#nav ul > li { 
    max-height: 37px; 
} 

... нужно быть ...

#nav ul > li { 
    height: 37px; 
} 

... для того, чтобы выровнять нижние границы.