0

#clim でマウスをホバーすると、ドロップダウンリストが作成され、 #dropdown の高さが 0 から 150px に変わります。しかし、コードは機能しません。

htmlコード

     <div id="menu">
              <ul>
                <li id="index">Accueil</li>

                <li id="clim">Climatisation</li>
                <li id="ventil">Ventilation</li>
                <li id="electro">Electromenager</li>

              </ul>
            </div>
          </div>    
  <div id="dropdown" >
           <ul>
                <li id="index">Climatisation</li>
                <li id="clim">Ventilation</li>
          </ul>
          </div>

CSSコード

    #dropdown{
        margin-left:693px;
        width:165px;
        height:0px;
        position:absolute;
        background:#158DFB;
        overflow:hidden;
        -webkit-transition-duration:0.3s;
        }

この部分に問題があります。動作していません

    #clim:hover #dropdown{
        height:150px;
        }
4

2 に答える 2

2

まず第一に、コードには追加の終了タグと同じ ID (#clim) を持つ 2 つの要素があり、質問が明確になりません。

css を使用し、javascript を使用せずにこれを機能させるには、非表示の要素 (ドロップダウン) を外側の要素内に含める必要があります。これをホバーして、ドロップダウンを表示するようにトリガーします。

代わりにこれを試してから、必要な残りの CSS ルールを追加してください。

<div id="menu">
  <ul>
    <li id="one">Accueil</li>
    <li id="two">
      Climatisation
      <ul id="dropdown">
        <li id="subone">sub Link</li>
        <li id="subtwo">Another sub link</li>
      </ul>
    </li>
    <li id="three">Ventilation</li>
    <li id="four">Electromenager</li>
  </ul>
</div>

#dropdown{
  height: 0;
  overflow:hidden;
  -webkit-transition-duration:0.3s;
}

#menu:hover #dropdown{
  height:150px;
}
于 2013-03-24T12:42:41.567 に答える
0

#clim にマウスを合わせると #dropdown の高さが変わります

parentセレクターがないため、純粋な CSS ではそれを行うことはできません。

于 2013-03-24T12:23:59.657 に答える