マルチコンテナのブループリントグリッドとそれによってドロップダウンメニュー

Question

私はヘッダー（ブループリント）コンテナ（私はスーパーフィッシュjquery/cssプラグインを使用しています）にドロップダウンメニューを持っています。私はフッタとメインコンテンツのコンテナも持っています。 （私はそれらを持っているので、ブラウザの幅を埋めるそれぞれの背景を持つことができます）。問題は、ドロップダウンメニュー（ドロップダウン部分）が途切れて、コンテナが終了して次の項目が始まるときにサブメニューのリンクが見えないことです。コンテナ内にドロップダウンメニューを置かないことで、私はこれを回避することができますが、メニューはうまく整列しません。

私のヘッダーの周りに青写真の容器を使用する方法はありますか？またはいくつかのCSS私はグリッドと整列しようとすることができますか？ （私は960ピクセル幅のグリッドを使用しています - 関連するCSSをすべてコピーしようとしましたが、何らかの理由で整列していないので、何かを逃したかもしれません）

私は、私はまだそれほど面倒なので消極的だったが、私はすべての部門の理由があったと思う。（#menuは私がsf-menuとナビゲーションバーの他のリンクを分けると思った。#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のものを起動するためにメニュー項目の1つにマウスを合わせると、子は表示され、overflow: hidden設定で.containerにクリッピングされます。

overflow:hiddenを削除して、クリッピングの問題を解決する必要があります。 overflow:hiddenをクリアな修正として使用している場合は、適切な場所に<div style="clear: both;"></div>（または同様のもの）を使用して手でフロートをクリアする必要があります。

Answer 2

EDIT：は今、私はあなたのコードを見てきたことを、私は何を行うには良いアイデアを持っていると思う...下記参照：

私は、これはからz-index問題であることはほぼ肯定していますスーパーフィッシュDDMとBlueprint.cssを組み合わせる。

私が正しい場合、解決策は、ドロップダウンナビゲーションの最も近い配置祖先に非常に高いz-indexプロパティを追加することです。あなたのケースでは、追加：

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

注：問題が解決しない場合は

#nav_container { z-index:600; } 

は、直接の祖先が配置作り、それをz-indexを与えてみてください、あなたのコードでは、あなただけ作らz-index 2 ...私はそれを600または4000または99999のようなより高いものにします。それは非常に大きく、他の要素が与えられないことを知っている限り、あなたが選んだ番号は重要ではありませんより高いz指数。

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

div.containerの高さは、内側<ul class="sf-menu">の高さを加えたものは何でもパディング/マージン/ ... .container内で起こっているために少しになります：私はあなたがオーバーフローの問題があると思う