0

次のような HTML 構造があります。

        <div id="nav">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="#">Services Offered</a></li>
                    <ul>
                        <li><a href="/residential">Residential</a></li>
                        <li><a href="/commercial">Commercial</a></li>
                        <li><a href="/industrial">Industrial</a></li>
                    </ul>
                <li><a href="/areas">Areas We Service</a></li>
                <li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
            </ul>
        </div>

および次のような CSS スタイル:

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
    top: 100%;
    position: absolute;
    display: block;
    background: black;
}

CSS コードは、ネストされた HTML<ul>がホバー時に表示されることを許可していません。<ul>が先行の親である場合、これが問題であることは理解できます<li>が、そうではありませんか? JS/jQuery なしでこれを機能させるにはどうすればよいですか?

ありがとう！

4

4 に答える 4

1

これを試して

デモ(トグル メニュー ヘッダーを追加しませんでした)

更新されたデモ

#nav ul li ul {
   display: none;
}

#nav ul li:nth-of-type(3):hover ul {
   display: block;
}

<div id="nav">
    <ul>
       <li><a href="/">Home</a></li>
       <li><a href="#">Services Offered</a></li>
       <li>Toggle Me
          <ul>
             <li><a href="/residential">Residential</a></li>
             <li><a href="/commercial">Commercial</a></li>
             <li><a href="/industrial">Industrial</a></li>
           </ul>
        </li>
        <li><a href="/areas">Areas We Service</a></li>
        <li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
     </ul>
</div>

ul注: 無効なマークアップがあります。別の要素の下に子として直接ネストすることはできません。要素の 下にul別のものをネストする必要があります。ulli

また、別のリストを別のリストの下にネストし、それを切り替えたくない場合は、以下の部分を使用するよりもネストされた各リストを切り替えたいためnth-of-type、ここで意図的に 3 番目を選択していることに注意してください。のセレクターも同様に機能しますlilinth-of-type

デモ

#nav ul li:hover ul {
   display: block;
}
于 2013-05-17T03:34:40.153 に答える
1

問題は、ul要素がホバーされている要素内に含まれていないliことです。ul「hovered」要素内で要素を移動してみてくださいli。

これが私が作成したjsfiddleです。ulに含まれる要素のみを移動し、親要素liに追加します: http://jsfiddle.net/BQHyq/1/position:relative;li

ご不明な点がございましたら、お気軽にお問い合わせください。喜んでお手伝いさせていただきます。

于 2013-05-17T03:35:55.807 に答える
1

マークアップに無効なタグがあります。である必要があるul別のものを含むことはできません。これとは別に、削除されたcssを修正しただけで、このように見えます。どうやってそれを望んでいたのかわからない。ullitop:100%

デモ

CSS

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
  
    position: absolute; /* Change this to position:relative and your menu will appear  beneath its parent.*/
    display: block;
    background: black;
}

マークアップ修正済み

<div id="nav">
    <ul>
        <li><a href="/">Home</a>
        </li>
        <li><a href="#">Services Offered</a>

            <ul>
                <li><a href="/residential">Residential</a>
                </li>
                <li><a href="/commercial">Commercial</a>
                </li>
                <li><a href="/industrial">Industrial</a>
                </li>
            </ul>
        </li>
        <li><a href="/areas">Areas We Service</a>
        </li>
        <li><a id="quote" style="cursor: pointer">Request A Quote</a>
        </li>
    </ul>
</div>
于 2013-05-17T03:36:32.830 に答える
0

あなたがposition: relative;親に渡さなかったとは思えません。そして、主な問題は、<UL>が内部にないこと<LI>です。したがって:hover、トリガーされません。このためには、UL を LI 内に移動する必要があります。

このようなことを考えてみませんか。この HTML/CSS 構造を試してみませんか?

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

Fiddle:
http://jsfiddle.net/vMuxA/ (垂直メニュー)
http://jsfiddle.net/vMuxA/1/ (水平メニュー)

于 2013-05-17T03:34:13.947 に答える