我有以下 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 上时:
过渡只是行不通。我哪里错了?
最佳答案
不要隐藏您正在尝试转换的子 ul。将它设置为 display:block(无论如何它的高度都是 0px,所以你看不到它)。
#cssmenu .has-sub ul ul {
display: block;
}
一种更简洁的方法是使用您的原始 ul 选择器更具体并且仅隐藏父 UL,而不是隐藏所有 UL 并将子 UL 切换回显示: block 。不过,您需要添加另一个类来使用这种方法:
#cssmenu .top-sub-menu > ul {
display: none;
}
关于css-transitions - CSS 高度转换与 ul 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15000576/