html - Css 悬停下拉列表

Question

当鼠标悬停在#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;
        }   

Answer 1

首先，您的代码有额外的结束标记和 2 个具有相同 ID (#clim) 的元素，这并不能使问题变得很清楚。

要使用 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;
}