1

垂直ナビゲーション メニューがあり、特定の要素にカーソルを合わせると、さまざまなレベルのメニューを表示したいと考えています。問題は、使用した方法が機能せず、その理由がわかりません。「製品」にカーソルを合わせると、サブメニューが展開されるはずですが、何も起こりません。なんで？

HTML:

<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./product.html">Product</a></li>
       <ul>
       <li><a href="#">Blueberries</a></li>
       <li><a href="#">Rasberries</a></li>
       <li><a href="#">Strawberries</a></li>
       </ul>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>

CSS:

nav {
border:1px solid red;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
4

4 に答える 4

3

あなたのコード:

nav ul li:hover > ul {
    display:block;
}

「ホバーされたli display:block内に任意のulを作成する」ことを意味します。サブメニューは LI 内ではなく、LI の後にあります。 これは、あなたがやろうとしていたことの実用的なバージョンです。

作業中の HTML:

<li><a href="./product.html">Product</a>
       <ul>
       <li><a href="#">Blueberries</a></li>
       <li><a href="#">Rasberries</a></li>
       <li><a href="#">Strawberries</a></li>
       </ul>
</li>

ワーキングCSS:

nav ul li ul {
    display:none;
}
nav ul li:hover ul {
    display:block;
}
于 2013-06-02T19:10:16.223 に答える
1

また

nav ul ul {
   display:none;
}

する必要があります

nav ul li ul {
display:none;
}
于 2013-06-02T19:11:28.937 に答える
1

あなたのhtmlのためにこれを試してください：

<nav>
<ul>
    <li><a href="./index.html">Home</a></li>
    <li><a href="./about.html">About</a></li>
    <li><a href="./product.html">Product</a>
        <ul>
            <li><a href="#">Blueberries</a></li>
            <li><a href="#">Rasberries</a></li>
            <li><a href="#">Strawberries</a></li>
        </ul>
    </li>
    <li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
于 2013-06-02T19:21:17.653 に答える
0

これを変更するには 2 つの方法があります。HTML を更新するか、CSS を更新することができます。

コードを変更することには長所と短所があり、真空状態では、1 つのアプローチを他のアプローチよりも推奨することはできません。

HTML を変更せずに、CSS を次のように機能させることができます。

nav ul li:hover + ul {
  display: block;
}

子孫セレクターを使用するのではなく、これは隣接セレクターを使用し、ホバーされた LI の直後の要素にスタイルを適用することに注意してください。

あるいは、上記の HTML の変更も同様にうまく機能します。

このリンクhttp://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/は素晴らしいリソースを提供します。

于 2013-06-02T19:19:27.977 に答える