0

私は2つの別々のメニューを持っています。メニュー #1​​ の特定のボタンにカーソルを合わせると、メニュー #2 内のリンクを表示したいと考えています。可能であれば、CSSでこれを試してみたいと思います。私が使用しているCSSの一部を以下に示します。

HTML:

<nav>
    <ul>
        <li><a href="http://www.xecforce.com">HOME</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">FORUMS</a></li>
                <li><a href="#">GAMES</a></li>
                <li><a href="#">XECOM</a></li>
    </ul>
</nav>

<div id="sub-menu-items">
<ul>
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2</a></li>
</ul>
</div>

CSS:

#sub-menu-items ul li {
list-style-type: none;
z-index: 99999;
margin-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
display: none;
text-shadow: 2px 3px 3px #080808; 
}

nav ul li:first-child:hover #sub-menu-items ul li {
display: inline;
}

これはどのように機能していませんか？

4

3 に答える 3

1

親'li'内にサブメニューをネストする必要があります。コードは次のようになります。

<nav>
    <ul class="parent-menu">
        <li><a href="http://www.xecforce.com">HOME</a></li>
        <li><a href="#">NEWS</a>
           <ul class="sub-menu">
             <li><a href="#">Test 1</a></li>
             <li><a href="#">Test 2</a></li>
           </ul>
        </li>
        <li><a href="#">FORUMS</a></li>
        <li><a href="#">GAMES</a></li>
        <li><a href="#">XECOM</a></li>
</ul>
</nav>

次に、サブメニューul＆li（できればposition：absolute）のスタイルを設定でき、cssは次のようになります。.parent-menuli：hover .sub-menu {display：block}

于 2013-02-28T04:52:40.623 に答える
1

The sub-menu-items need to be a child of the li you are hovering. Thats what this selector means:

nav ul li:first-child:hover #sub-menu-items ul li

CSS drop down menus are done like this:

HTML 

<ul>
<li>Parent Item
    <ul>
       <li>Sub item</li>
       <li>Sub item</li>
    </ul>
</li>
<li>Parent Item
    <ul>
       <li>Sub item</li>
       <li>Sub item</li>
    </ul>
</li>
</ul>

CSS

ul ul {
display: none;
}

ul > li:hover ul {
display: block;
}
于 2013-02-28T04:54:03.377 に答える
0

要素の ':hover' 状態は、その子要素にのみ影響します。:hover を使用して外部要素に影響を与えるには、javascript を使用できます。

この行の CSS

nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}

「nav」の最初の「li」内にある「#sub-menu-items ul li」を探しています。

レイアウトによっては、2 番目のメニューを最初のメニュー内に移動した場合にのみ、目的の効果を得ることができます。

于 2013-02-28T04:55:04.150 に答える