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;
}

Answer 2

当鼠标悬停在#clim时，＃dropdown的高度会改变

你不能用纯CSS做到这一点，因为没有parent选择器。

Css悬停下拉列表

2 个答案: