Css悬停下拉列表

Question

我创建了一个下拉列表，当鼠标悬停在#clim时，#下拉列表的高度从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

首先，你的代码有额外的结束标签和两个具有相同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;
}  

Answer 2

当鼠标悬停在#爬升#下拉框的高度时

你不能在纯CSS中这样做，因为没有parent选择器。