0

ヘッダー（ブループリント）コンテナーにドロップダウンメニューがあります（superfish jquery / cssプラグインを使用しています）。フッターとメインコンテンツコンテナもあります。（私はそれらを持っているので、ブラウザーの幅を満たすそれぞれの背景を持つことができます）。問題は、ドロップダウンメニュー（ドロップダウンパーツ）が途切れて、コンテナが終了して次のコンテナが開始したときにサブメニューのリンクが表示されないことです。ドロップダウンメニューをコンテナに入れないことで、これを回避できますが、メニューが適切に配置されません。

ヘッダーの周りのブループリントコンテナを使用して、それが途切れないようにする方法はありますか？またはいくつかのCSSをグリッドに合わせることができますか？（私は960px幅のグリッドを使用しています-関連するすべてのcssをコピーしようとしましたが、それでも何らかの理由で整列しなかったので、何かを逃した可能性があります）

私はいくつかのおそらく関連するcssを含めました...それはまだちょっと厄介なので気が進まなかったが、私はすべてのdivに理由があったと思います... :(（＃menuはsf-menuを分離するために使用されたと思いますナビゲーションバーの他のリンク、＃nav_containerはバーのスタイルを設定することであり、ブループリントグリッドは.containerに含まれている必要があり、何が起こっているのかがわかるまで、superfish.cssのコードを自分のスタイルとは別に維持しようとします--Iまた、説明なしでいくつかの例に従ったため、次のcssの多くで実際に必要なプロパティがわかりません）また、ブループリント付きのcompass / sass railsプラグインを使用しているため、最終結果は通常よりも冗長になる可能性があります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>

そのため、メインメニューの[アカウント]にカーソルを合わせると、ドロップダウンメニューが表示されますが、[設定]と[その他]のリンクが途切れます。

4

2 に答える 2

1

オーバーフローの問題があると思います：

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

の高div.containerさは、内側の高さに、内側で行わ<ul class="sf-menu">れているパディング/マージン/...の少しを加えたものになります.container。メニュー項目の1つにカーソルを合わせてスーパーフィッシュ/サッカーフィッシュのものをアクティブにすると、子が表示され、のoverflow: hidden設定によってクリップされ.containerます。

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

于 2011-02-02T03:14:01.597 に答える
0

編集： 私はあなたのコードを見たので、私は何をすべきかについてより良い考えを持っていると思います...以下を参照してください：

z-indexこれは、SuperfishDDMとBlueprint.cssを組み合わせた場合の問題であるとほぼ確信しています。

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

#nav_container { z-index:600; }

それでも問題が解決しない場合は、直接の祖先を配置して、z-index：を付けてみてください。

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

注：コードでは、z-index 2のみを作成しました...600、4000、99999のように、かなり高くします。非常に大きく、他の要素にこれ以上高いz-indexが与えられることはないことを知っています。

于 2011-02-01T19:12:11.577 に答える