0

これはCSSの達人にとっては簡単かもしれないと思います:)現在取り組んでいるページに、ドロップラインメニューが必要な場所にいくつかのCSSを適用しようとしています。ここからコードを取得し、マイナーな変更を加えました (外側の ul の幅、外側の ul の id の代わりにクラス、巨大な負のインデントの代わりに z-index)

誤解があるようですので、このメニューがどのように機能するかについての詳細を以下に示します。

  • 2 つのレベルがあり、1 つは上に、もう 1 つは下にあります。
  • トップ メニューから現在選択されているリンクには、そのリンクを含む li 要素に関連付けられた css-class "current" があります。(私はそのために MVC SiteMapProvider を使用しますが、これはこの質問には関係ありません)
  • デフォルトでは、その「現在の」トップ メニューに関連付けられているサブメニューが表示されます。
  • ただし、ユーザーが別のトップ メニューへのリンクにカーソルを合わせると、別のサブメニューが重なる必要があります。

（それが少し明確になることを願っています）

これは私が使用しているマークアップです:

<ul class="mainMenu">
  <li>
    <a href="#">Link1</a>
    <ul>
      <li>
      <a href="#">Sub1</a>
      </li>
      <li>
      <a href="#">Sub1</a>
      </li>
      <li>
      <a href="#">Sub1</a>
      </li>
    </ul>
  </li>
  <li class="current">
    <a href="#">Link2</a>
    <ul>
      <li>
      <a href="#">Sub2</a>
      </li>
      <li>
      <a href="#">Sub2</a>
      </li>
      <li>
      <a href="#">Sub2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link3</a>
    <ul>
      <li>
      <a href="#">Sub3</a>
      </li>
      <li>
      <a href="#">Sub3</a>
      </li>
      <li>
      <a href="#">Sub3</a>
      </li>
    </ul>
  </li>
</ul>

そして、これらのスタイルを使用します:

* {
    margin:0;
    padding:0;
}
.mainMenu {
    list-style:none;
    height:3.8em;
    position:relative;
    line-height:1.4em;
}
.mainMenu li {
    width:136px;
    float:left;
    text-align:center;
}
.mainMenu a {
    height:1.5em;
    display:block;
    text-decoration:none;
    color:#000;
    background:#999;
}
.mainMenu li.current ul li.current a, .mainMenu li.current a div, .mainMenu a:active, .mainMenu a:focus, .mainMenu a:hover {
    background:#777;
}
/* --------- Sub Nav --------- */
.mainMenu li.current ul {
    left:0;
}
.mainMenu ul {
    position:absolute;
    left: 0;
    z-index: 1;

    width:408px;
    list-style:none;
    padding:.9em 0 0;
}
.mainMenu ul li {
    width:auto;
    margin:0 15px 0 0;
}
.mainMenu ul a {
    font-size:80%;
    height:auto;
    padding:0 8px;
}
.mainMenu li.current ul, .mainMenu li:hover ul { 
    z-index: 10;

    background:#fff;
}

すでに両方を含むフィドルについては、こちらも参照してください。一般に、これはかなりうまくいくようですが、右にホバーすると (リンク 1)、サブメニューから対応するリンクが表示されませんが、右にホバーすると機能します (リンク 3)。なぜこれが事実なのか誰にも分かりますか？

ps：現在のノードがスタイルを適用していない理由もわかりません

.mainMenu li.current ul

（少なくともfirefox 17.0.1では表示されませんが、フィドル自体にない場合、その問題は発生しないため、おそらくマイナーな問題であり、ここでの主な質問ではありません）

4

3 に答える 3

1

CSS を少し追加するだけです。

.mainMenu ul {
    display: none;
}

.mainMenu li:hover > ul {
    display: block;
}

例

編集

で変更または削除するだけz-indexです.mainMenu li.current:hover ul。フィドル

于 2013-04-12T09:47:37.073 に答える