0

私は次のcssを持っています:

#cssmenu .has-sub .has-sub:hover > ul {
  height: 76px;
}
#cssmenu .has-sub .has-sub ul {
  height: 0px;
  overflow: hidden;
  position: inherit;
  left: -1px;
  top: -1px;
  background-color: #999;
  transition: height 2s;
  -moz-transition: height 2s; /* Firefox 4 */
  -webkit-transition: height 2s; /* Safari and Chrome */
  -o-transition: height 2s; /* Opera */
}

このhtmlで：

<div id="cssmenu">
  <ul>
    <li class="active has-sub"><a href="#"><span>Products</span></a>
      <ul>
        <li class="has-sub"><a href="#"><span>Product 1</span></a>
          <ul>
            <li><a href="#"><span>Sub Product</span></a></li>
            <li class="last"><a href="#"><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 2</span></a>
           <ul>
            <li><a href="#"><span>Sub Product</span></a></li>
            <li class="last"><a href="#"><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 3</span></a>
          <ul>
            <li><a href="#"><span>Sub Product</span></a></li>
            <li class="last"><a href="#"><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

マウスを製品 1 の上に移動すると、次のようになります。

ここに画像の説明を入力

ここに画像の説明を入力

移行が機能していません。どこで間違ったのですか？

全ページはこちらから

4

1 に答える 1

1

移行しようとしている子を非表示にしないでください。display：blockに設定します（とにかく高さが0pxなので、表示されません）。

  #cssmenu .has-sub ul ul {
    display: block;
  }

よりきちんとしたアプローチは、元のulセレクターをより具体的にし、すべてのULを非表示にして、子をdisplay：blockに戻すのではなく、親ULのみを非表示にすることです。ただし、このアプローチに接続するには、別のクラスを追加する必要があります。

  #cssmenu .top-sub-menu > ul {
    display: none;
  }
于 2013-02-21T11:12:20.530 に答える