[英]Having trouble getting a smooth dropdown menu working with css
嗨,大家好,我在使用CSS处理子菜单下拉菜单时遇到了麻烦。 我正在尝试添加平滑的过渡外观,但是当我将鼠标悬停时,菜单甚至都没有显示。 我确定这是我所缺少的小东西,但是我似乎无法弄清楚问题出在哪里。 这是代码:
#main-navigation ul.folder-child{
opacity: 0;
visibility: hidden;
-moz-transition: height 0.3s ease-in-out;
-ms-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
#main-navigation li:hover ul.folder-child{
opacity: 1;
visibility: visible;
top: 50px;
}
我会很感激任何人都可以提供的帮助。 提前致谢!
您仅为高度定义过渡,并且没有为高度定义css规则。 这是您的解决方案。
请注意:要转换height属性,您需要在正常和悬停状态下定义高度。
ul.folder-child {
width: 180px;
height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
position:absolute;
top: 100%;
left: 0;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#main-navigation li:hover > ul.folder-child {
height: 100px;
opacity: 1;
visibility: visible;
}
也许检查您的浏览器,IE不支持所有CSS3功能。
也许最好使用display:none 和 display:block 而不是 不透明度 和 可见性 ;
<ul>
<li>
<a href="#">Item #1</a>
<ul>
<li><a href="">Sub-Item #1</a></li>
<li><a href="">Sub-Item #2</a></li>
<li><a href="">Sub-Item #3</a></li>
</ul>
</li>
<li>
<a href="#">Item #2</a>
<ul>
<li><a href="">Sub-Item #4</a></li>
<li><a href="">Sub-Item #5</a></li>
<li><a href="">Sub-Item #6</a></li>
</ul>
</li>
<li>
<a href="#">Item #3</a>
<ul>
<li><a href="">Sub-Item #7</a></li>
<li><a href="">Sub-Item #8</a></li>
<li><a href="">Sub-Item #9</a></li>
</ul>
</li>
</ul>
ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
http://jsfiddle.net/spliter/vWDvy/
在IE ASWELL上工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.