1

コード：

 <div class="menu">
 <ul class="top_thing">
      <li class="one_one">Services</li>
           <ul class="the_one">
                 <li class="second">Language 1</li>
         <li class="second">Language 2</li>
         <li class="second">Language 3</li>
         <li class="second">Language 4</li>
             <li class="second">Language 5</li>
    </ul>
  <li class="one_one">About Us</li>
      <li class="one_one">Contact</li>
 </ul>
 </div>

CSS の場合: .the_one で display:none を使用しています。サービス タブをホバーしたら、.the_one を表示します。これどうやってするの？私はやってみました：

 li.the_one:hover {
 display:block;
 }

しかし、それもうまくいきません。

4

3 に答える 3

3

HTML が無効です。 <ul>子としてのみ持つ必要があります<li>(これには other が含まれ<ul>ます。修正したら、次のルールを追加します。

.the_one {
    display: none;
}

.one_one:hover .the_one {
    display: block;
}

http://jsfiddle.net/xvEvj/

于 2013-03-01T01:46:05.110 に答える
1

それを表示するには、css の内部リストをターゲットにする必要があります。

css を次のように変更します。

li.the_one:hover ul.the_one
{
display:block
}

"li.the_one:hover" は、クラス "the_one" を持つ li がホバーされたときにこれが発生することを示し、次にクラス "the_one" を持つリスト項目内のクラス "それ"。

お役に立てれば。

乾杯。

于 2013-03-01T01:43:42.037 に答える
0

HTML が無効です。

<div class="menu">
<ul class="top_thing">
    <li class="one_one">Services
        <ul class="the_one">
            <li class="second">Language 1</li>
            <li class="second">Language 2</li>
            <li class="second">Language 3</li>
            <li class="second">Language 4</li>
            <li class="second">Language 5</li>
        </ul>
    </li>
    <li class="one_one">About Us</li>
    <li class="one_one">Contact</li>
</ul>

2 番目の順序なしリストは、最初の順序なしリストのリスト項目内にある必要があります。

于 2013-03-01T01:58:11.663 に答える