내 탐색의 하위 메뉴가 너비를 변경하는 이유는 무엇이며 어떻게 수정합니까?

Question

내 탐색에서 하위 메뉴 또는 하위 메뉴를 열 때마다 상위 메뉴의 너비가 변경됩니다. 나는 여기서 무엇을 잘못하고 있는가? 나는 그것을 어떻게 막을 수 있습니까? 나의 목표는 하위 메뉴가 그 위에있는 메뉴와 동일한 최소 너비를 갖도록하는 것이 었습니다. 또한 아래쪽 테두리가 일부 메뉴 항목에 제대로 표시되지 않는 이유는 무엇입니까? 나는이 메뉴를 클라이언트에게 보여주기 전에 멋지고 윤이 나게 보이기 위해이 메뉴가 필요합니다. 이것은 단지하지 않습니다.

내 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; 
} 

... 아래쪽 테두리를 줄이기 위해.