CSS 플라이 아웃 메뉴 문제

Question

나는 당신이 그것의 제대로 날아 페이지에 링크 우리의 능력 이상 가져 가면 2 시간 this link

의 홈 페이지에있는 플라이 아웃 메뉴를 사용하여 문제를 발견하려고 노력 등에이 하지만 기본 배경은 내가 가져다 놓은 동안 내가 준 폭을 수용하기 위해 늘리지 않을 것입니다. 코드는

HTML

<ul id="menu"> 
     <li><a href="index.php" class="current">Home </a></li> 
     <li><a href="#">Capabilities </a> 
      <ul class="innerul"> 
      <li><a href="quilt.html">Wire Harness & Cable Assemblies</a></li> 
      <li><a href="quilting-services.html">Electro Mechanical Assemblies</a></li> 
      <li><a href="bags-&amp;-totes.html">On-Site Machine Shop</a></li> 
      <li><a href="zombie-felties.html">FAcilities & Equipment listing</a></li> 
      <li><a href="coming-soon.html"> Quality Assurance</a></li> 
      <li><a href="coming-soon.html"> Computer Control System</a></li> 
      </ul> 
     </li> 
     <li><a href="process-control.php">Process Control</a></li> 
     <li><a href="about-us.php">About Us</a></li> 
     <li><a href="contact-us.php">Contact Us</a></li> 
     </ul> 

CSS 아래에 표시됩니다

#menu 
{ 
     width: 100%; 
     margin: 0; 
     padding: 0px 0 0 0; 
     list-style: none; 

} 

#menu li 
{ 
    float: left; 
    position: relative; 
    width: 192px; 
    padding-top: 0; 
    padding-right: 0; 
    padding-bottom: 10px; 
    padding-left: 0; 
    margin: 0px; 
    text-align: center; 
} 



#menu a 
{ 
     float: left; 
     height: 25px; 
     text-align: center; 
     width: 192px; 
     color: #999; 
     text-transform: uppercase; 
     font: bold 12px/25px Arial, Helvetica; 
     text-decoration: none; 

} 

#menu .innerul li li:hover > a 
{ 
    color: #fafafa; 
    width: 250px; 
} 

*html #menu li a:hover /* IE6 */ 
{ 
     color: #fafafa; 
} 

#menu li:hover > ul 
{ 
    width: 250px; 
     display: block; 


} 

/* Sub-menu */ 

#menu li .innerul 
{ 
    list-style: none; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    display: none; 
    position: absolute; 
    top: 20px; 
    left: 0; 
    z-index: 99999; 
    background: #192833; 
    background: -moz-linear-gradient(#1f323f, #192833); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #192833)); 
    background: -webkit-linear-gradient(#1f323f, #192833); 
    background: -o-linear-gradient(#1f323f, #192833); 
    background: -ms-linear-gradient(#1f323f, #192833); 
    background: linear-gradient(#1f323f, #192833); 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 



#menu li .innerul li 
{ 
    float: none; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    display: block; 
    -moz-box-shadow: 0 1px 0 #010101, 0 2px 0 #2b4253; 
    -webkit-box-shadow: 0 1px 0 #010101, 0 2px 0 #2b4253; 
    box-shadow: 0 1px 0 #010101, 0 2px 0 #2b4253; 
} 

#menu li .innerul li:last-child 
{ 
    width: 250px; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

#menu li .innerul li a 
{ 
    width: 250px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 0px; 
    padding-right: 0px; 
     height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
     text-transform: none; 
} 

*html #menu ul a /* IE6 */ 
{ 
     height: 10px; 
     width: 192px; 
} 

*:first-child+html #menu ul a /* IE7 */ 
{ 
     height: 10px; 
     width: 192px; 
} 

#menu li .innerul li a:hover 
{ 
    background: #0186ba; 
    width: 250px; 
     background: -moz-linear-gradient(#04acec, #0186ba); 
     background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
     background: -webkit-linear-gradient(#04acec, #0186ba); 
     background: -o-linear-gradient(#04acec, #0186ba); 
     background: -ms-linear-gradient(#04acec, #0186ba); 
     background: linear-gradient(#04acec, #0186ba); 
} 

#menu li .innerul li:first-child a 
{ 
    -moz-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
    width: 250px; 
} 

#menu li .innerul li:first-child a:after 
{ 
    content: ''; 
    position: absolute; 
    width: 250px; 
    left: 30px; 
    top: -5px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #1f323f; 
} 

#menu ul li:first-child a:hover:after 
{ 
    border-bottom-color: #04acec; 

} 

#menu ul li:last-child a 
{ 
    width: 192px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
} 

/* Clear floated elements */ 
#menu:after 
{ 
    width: 192px; 
     visibility: hidden; 
     display: block; 
     font-size: 0; 
     content: " "; 
     clear: both; 
     height: 0; 
} 

* html #menu    { zoom: 1; } /* IE6 */ 
*:first-child+html #menu { zoom: 1; } /* IE7 */ 
#left { 
    float: left; 
    width: 700px; 
    margin-right: 20px; 
    height: auto; 
    margin-bottom: 25px; 
    margin-top: 0px; 
} 
#rack #header #navbar #menu li .innerul { 
    margin: 0px; 
    padding: 0px; 
} 

Answer 1

귀하의 상단 메뉴 CSS 규칙이 내부보다 더 구체적이다. #rack #header #navbar ul을 #rack #header #navbar > ul으로 변경하여이 규칙이 최상위 메뉴에만 적용되도록하십시오.

또한 250px 너비를 350px로 늘려 텍스트를 저장할 공간이 충분한 지 확인하십시오.