无法使用 css 获得平滑的下拉菜单答案

【问题标题】：Having trouble getting a smooth dropdown menu working with css无法使用 css 获得平滑的下拉菜单
【发布时间】：2015-10-02 16:32:06
【问题描述】：

大家好，我一直无法让子菜单下拉菜单与 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;
}

如果有人能提供任何帮助，我将不胜感激。提前致谢！

【问题讨论】：

提供您的 html 代码或创建您的小提琴...这样我们就可以轻松解决您的问题...

标签： html css drop-down-menu css-transitions transition

【解决方案1】：

您只为高度定义过渡，并且没有为高度定义 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;
}

查看http://jsfiddle.net/logiccanvas/vWDvy/480/

【讨论】：

【解决方案2】：

也许最好使用 display: none and display: block 而不是 opacity 和 可见性；

<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 上工作！

【讨论】：

【解决方案3】：

可能检查你的浏览器，IE不支持所有的CSS3功能。

【讨论】：