下拉菜单效果[关闭]答案

【问题标题】：Dropdown menu effect [closed]下拉菜单效果[关闭]
【发布时间】：2014-12-29 22:52:43
【问题描述】：

我正在处理site。如您所见，有一个名为“数字营销”的菜单项。该项目有一个名为 Digital Marketing Consultancy 的子菜单。我希望该子菜单像任何其他网站一样具有下拉效果，就像我们将菜单项悬停在子菜单下拉菜单中一样。例如：喜欢菜单here。

我尝试过给予

 .sub-menu{display:none;}
 .sub-menu:hover{display:block;}

这里是fiddle。我怎样才能让它像其他网站的菜单效果一样。请帮助。谢谢！ updated fiddle

【问题讨论】：

这里的文章真的很好 -> wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS
你真的不需要任何 JavaScript/jQuery 来实现你想要的。网上有很多教程和指南可以制作下拉菜单。这个will 或许能帮到你！

标签： javascript jquery html css drop-down-menu

【解决方案1】：

纯 css 解决方案是 CSS(3) 过渡。

http://jsfiddle.net/9gjbfvwy/

使用宽度和高度 0，隐藏溢出。使用 CSS3 过渡将它们设置为自动。

见 fiddle（这是你的代码，有 3 个添加）

ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

【讨论】：

这行得通，但是当我添加另一个带有子菜单的子菜单项时，它又出错了.. 这是更新的小提琴jsfiddle.net/wyy7e61o/4
.menu-item:hover > ul.sub-menu 刚刚将 > 添加到 css 中，这样，您只会对作为菜单项的直接子项而不是子项的 ul 进行动画处理一个孩子等。不要像我的例子中的 50px 那样使用固定高度，而只是使用自动高度
jsfiddle.net/bkau4Lz0 是工作子子菜单的例子，唯一的事情是，你需要考虑你到底想要什么菜单，然后只玩高度、宽度、相对/绝对位置等跨度>

【解决方案2】：

.sub-menu 是您的子菜单，因此您需要将鼠标悬停在主菜单项上，而不是子菜单项上。

将此添加到您的 CSS：

ul#menu-main li ul.sub-menu{
    display:none;
}

ul#menu-main li:hover ul.sub-menu{
    display:block;
}

工作 jsFiddle：http://jsfiddle.net/wyy7e61o/1/

【讨论】：

这行得通，但是当我添加另一个带有子菜单的子菜单项时，它又出错了.. 这是更新的小提琴 jsfiddle.net/wyy7e61o/4
它没有动画，就像问的那样

【解决方案3】：

您最初应该隐藏所有子菜单并在悬停父菜单时显示它们。喜欢

.sub-menu {
    display: none;
}
.menu-item:hover > ul.sub-menu {
    display: block;
}

在此处检查更新的小提琴 http://jsfiddle.net/wyy7e61o/6/

【讨论】：

你的 jsfiddle 链接到原来的 jsfiddle，请修复它。
更新小提琴链接！
他工作了，但是当我添加另一个带有子菜单的子菜单项时，它又出错了.. 这是更新的小提琴 jsfiddle.net/wyy7e61o/4
您评论中给出的小提琴没有我的css代码！看看这个更新的小提琴jsfiddle.net/wyy7e61o/6
它没有动画，就像问的那样