멀티 컨테이너 청사진 그리드 및 드롭 다운 메뉴로 인해 잘립니다.

Question

헤더 (청사진) 컨테이너 (나는 슈퍼 피쉬 jquery/css 플러그인을 사용하고 있습니다)에 드롭 다운 메뉴가 있습니다. 꼬리말과 주 콘텐츠 컨테이너도 있습니다. (나는 브라우저 너비를 채우는 각각의 배경을 가질 수 있도록했습니다.) 문제는 드롭 다운 메뉴 (드롭 다운 부분)가 끊어져 컨테이너가 끝나고 다음이 시작될 때 하위 메뉴 링크를 볼 수 없다는 것입니다. 컨테이너에 드롭 다운 메뉴를 두지 않음으로써 나는 이것을 회피 할 수 있지만 메뉴가 잘 정렬되지 않습니다.

내 머리글 주위에 청사진 컨테이너를 사용할 수 있고 잘리지 않는 방법이 있습니까? 또는 일부 CSS를 그리드와 정렬되도록 할 수 있습니까? (나는 960px 와이드 그리드를 사용하고있다. - 관련된 모든 CSS를 복사하려고했으나 어떤 이유로 든 정렬되지 않았다. 그래서 어쩌면 나는 무엇인가 놓쳤다.)

나는 아마도 관련성있는 CSS를 포함시켰다. 나는 여전히 혼란 스럽기 때문에 꺼려했지만 모든 div에 대한 이유가 있었다고 생각합니다. (#menu는 sf-menu와 navbar의 다른 링크를 분리한다고 생각합니다. #nav_container는 다음과 같습니다. 스타일 바, 청사진 그리드는 .container에 포함되어야하고, 내가 무슨 일이 일어나는지 알아낼 때까지 superfish.css의 코드를 내 스타일링과 별도로 유지해야합니다. - 실제로 어떤 속성이 필요한지 잘 모르겠습니다. 다음의 CSS 중 많은 부분이 설명이없는 몇 가지 예제를 따라갔습니다.) 또한, 청사진을 사용하여 나침반/새시 레일 플러그인을 사용하므로 최종 결과가 일반적인 CSS보다 더 자세한 정보 일 수 있습니다.

body .container { 
    width: 950px; 
    margin: 0 auto; 
    overflow: hidden; 
    *zoom: 1; 
} 

#nav_container { 
    height: 34px; 
    width: 100%; 
    line-height: 36px; 
    position: relative; 
    z-index: 2; 
    margin: 0; 
    padding: 0; 
} 

#nav_container ul a { 
    display: block; 
} 

#nav_container ul li { 
    float: left; 
    position: relative; 
    top: -1px; 
} 
#nav_container #menu { 
    display: inline; 
    float: left; 
    margin-right: 0; 
    width: 950px; 
    margin: 0 auto; 
} 

* html #nav_container #menu { 
    overflow-x: hidden; 
} 

#nav_container #menu .sf-menu { 
    width: 950px; 
    margin: 0; 
    margin-right: 0; 
    display: block; 
    float: left; 
} 

/*superfish stuff, edited from superfish.css*/ 

/* line 8, ../../app/stylesheets/partials/_superfish.sass */ 
.sf-menu ul { 
    position: absolute; 
    top: -999em; 
    width: 10em; 
} 
.sf-menu ul li { 
    width: 100%; 
} 
.sf-menu ul:hover { 
    visibility: inherit; 
    /* fixes IE7 'sticky bug' */ 
} 
.sf-menu li { 
    float: left; 
    position: relative; 
    /* match top ul list item height */ 
} 
.sf-menu li:hover ul, .sf-menu li.sfHover ul { 
    left: 0; 
    top: 3em; 
    z-index: 2; 
} 
.sf-menu a { 
    display: block; 
    position: relative; 
} 
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { 
    top: -999em; 
} 
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { 
    left: 10.75em; 
    /*adjust this if not using rounded corners etc */ 
    top: 0; 
} 
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { 
    top: -999em; 
} 
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { 
    left: 10em; 
    /* match ul width */ 
    top: 0; 
} 

/** DEMO SKIN ** */ 
.sf-menu { 
    float: left; 
    margin-bottom: 1em; 
} 

HTML :

<div id='headerbg'> #this is a wrapper so the header has a full width bg image, just has a background property 
       some stuff here 
       <div id='nav_container'> 
       <div class='container'> 
        <div id='menu'> 
        <ul class='sf-menu'> 
         <li><a href="/">Home</a></li> 
         <li><a href="/about">About</a></li> 
         <li><a href="#">Account</a> 
         <ul> 
          <li><a href="#">Settings</a> </li> 
          <li><a href="#">Other link</a></li> 
         </ul> 
         </li> 
        </ul> 
        </div> 
       </div> 
       </div> 
      </div> 

내가 주 메뉴에서 계정 위로 마우스를 이동한다면, 드롭 다운 메뉴 만 설정 및 기타 링크의 전혀 타지이 차단되어있다.

Answer 1

난 당신이 오버 플로우 문제가 있다고 생각 . Superfish/Suckerfish 항목을 활성화하기 위해 메뉴 항목 중 하나를 가리키면 설정이 .container에 의해 자식이 나타나고 잘립니다.

overflow:hidden을 버리면 클리핑 문제가 해결됩니다. overflow:hidden을 클리어 픽스 (clear-fix)로 사용하는 경우 (또는 이와 유사한)을 적절한 위치에두고 수작업으로 실수를 해결해야합니다.

Answer 2

편집 :이 지금 내가 코드를 본 적이 있는지, 내가 무엇을해야 하는지를 더 나은 아이디어가 생각 ... 아래 참조 :

을 나는 거의 긍정적 인 생각이에서 z-index 문제입니다 Superfish DDM을 Blueprint.css와 결합합니다.

맞습니다. 해결책은 드롭 다운 탐색의 가장 가까운 위치에 상위 z-index 속성을 추가하는 것입니다. 귀하의 경우, 추가

#menu { position:relative; z-index:600; } 

참고 : 문제가 해결되지 않으면

#nav_container { z-index:600; } 

는 직접적인 조상이 위치 만들고 그것을 z-index을 제공하려고 코드에서, 당신은 단지 만든 z-index 2 ... 나는 600이나 4000이나 99999처럼 더 높은 waaaay를 만들 것입니다. 아주 크고 다른 어떤 요소도 주어지지 않을 것입니다. 높은 z- 색인 div.container의 높이가 내부 <ul class="sf-menu">의 높이를 더한 패딩/마진/...이 .container 내부에 가고 무엇 이건 조금있을 것

body .container { 
    /*...*/ 
    overflow: hidden; 
    /*...*/ 
} 

: