드롭 다운 메뉴 오류

Question

친절하게이 웹 사이트를 고려하십시오 : http://indivar.biz/test/balkar/. 나는 "주거 프로젝트"탭에서 하위 메뉴 드롭 다운을 만들었지 만 탐색 탭 "주거 프로젝트"를 탐색 할 때 탐색 회색 영역 내의 하위 드롭 다운 메뉴를 표시하지만 회색 영역 밖에 표시하려고합니다. 전체 콘텐츠 너비와 함께 탐색.

CSS

.left-section { 
    float: left; 
    overflow: hidden; 
    width: 220px; 
} 

#nav { 
    background: none repeat scroll 0 0 #E4E4E4; 
    position: relative; 
    z-index: 9999; 
} 
#nav ul { 
    margin: 0 auto; 
    padding: 6.5px 0; 
    width: 197px; 
} 
#nav ul li { 
    background: url("../images/nav-line-bottom.jpg") repeat-x scroll center bottom transparent; 
    height: 29px; 
    line-height: 34px; 
} 
#nav ul li a { 
    color: #242121; 
    display: block; 
    font-size: 15px; 
    height: 30px; 
    line-height: 23px; 
    margin-top: 5px; 
    text-decoration: none; 
} 
#nav ul li a.home { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 0 transparent; 
    padding-left: 32px; 
} 
#nav ul li a.about { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -32px transparent; 
    padding-left: 32px; 
} 
#nav ul li a.services { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -63px transparent; 
    padding-left: 32px; 
} 
#nav ul li a.resi-proj { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -96px transparent; 
    padding-left: 32px; 
} 
#nav ul li a.comm-proj { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -130px transparent; 
    padding-left: 32px; 
} 
#nav ul li a.career { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -161px transparent; 
    padding-left: 32px; 
} 
#nav ul li a.faq { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -195px transparent; 
    padding-left: 32px; 
} 
#nav ul li a.nri { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -228px transparent; 
    padding-left: 32px; 
} 
#nav ul li a.cont { 
    background: url("../images/nav-icons.png") no-repeat scroll 0 -262px transparent; 
    padding-left: 32px; 
} 
#nav ul li ul { 
    background: none repeat scroll 0 0 #CC0000; 
    display: none; 
    left: 150px; 
    position: absolute; 
    top: 135px; 
    width: 220px; 
    z-index: 9999; 
} 
#nav ul li:hover ul { 
    display: block; 
} 
#nav ul li ul li a { 
    color: #FFFFFF; 
    display: block; 
} 

HTML

<div class="left-section"> 
     <!--logo div ends--> 
     <div class="clear"></div> 
     <div class="margin-top" id="nav"> 
     <ul> 
      <li><a class="home" href="#">Home</a></li> 
      <li><a class="about" href="#">About Us</a></li> 
      <li><a class="services" href="#">Our Services</a></li> 
      <li><a class="resi-proj" href="#">Residential Projects</a> 
       <ul> 
       <li><a href="#">All</a></li> 
       <li><a href="#">Apartments</a></li> 
       <li><a href="#">Floors</a></li> 
       <li><a href="#">Plots</a></li> 
       <li><a href="#">Villas</a></li> 
      </ul> 

      </li> 
      <li><a class="comm-proj" href="#">Commercial Projects</a></li> 
      <li><a class="career" href="#">Career</a></li> 
      <li><a class="faq" href="#">FAQ's</a></li> 
      <li><a class="nri" href="#">NRI Club</a></li> 
      <li style="background: none repeat scroll 0% 0% transparent;"><a class="cont" href="#">Contact Us</a></li> 
     </ul> 
     </div> 

    </div> 

Answer 1

오버 플로우를 제거 :

다음은 관련 코드 당신의 .left-section DIV에서을 숨겨. 같이 쓰기 :

.left-section { 
    float: left; 
    width: 220px; 
} 

#nav ul li ul { 
    background: none repeat scroll 0 0 #CC0000; 
    display: none; 
    left: 220px; 
    position: absolute; 
    top: 135px; 
    width: 220px; 
    z-index: 9999; 
} 

Answer 2

를 먼저 귀하의 하위 메뉴는 메뉴 항목에서 지금까지로드, 해결해야 할 몇 가지 문제를 가지고, 난 당신과 같이 옆에 그것을 부모 메뉴 항목을, 측면을 배치 좋을 것 :

#nav ul li { 
    position:relative; 
} 

#nav ul li ul { 
    background: none repeat scroll 0 0 #CC0000; 
    display: none; 
    left: 100%; /* change here */ 
    position: absolute; 
    top: 0; /* change here */ 
    width: 220px; 
    z-index: 9999; 
} 

또한, 당신은 재산 overflow:hidden를 사용하여 .left-section 내부에 하위 메뉴를 숨기고있어, 그것을 제거하고 전체에 표시됩니다.

데모 : http://jsfiddle.net/QHaS9/1/