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

首先，您的代码有额外的完成标记和 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;
}
于 2013-03-24T12:42:41.567 回答
0

当鼠标悬停在#clim 时，#dropdown 的高度会发生变化

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

于 2013-03-24T12:23:59.657 回答