Question

我正在研究site。您可以看到有一个名为Digital Marketing的菜单项。该项目有一个名为Digital Marketing Consultancy的子菜单。我希望子菜单像任何其他网站一样具有下拉效果，就像我们将菜单项悬停在子菜单下拉菜单时一样。例如：喜欢菜单here。

我试过给

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

这里是fiddle。我可以把它变成其他网站的菜单效果。请帮忙。谢谢!! 的 updated fiddle

Answer 1

纯css解决方案是CSS（3）转换。

http://jsfiddle.net/9gjbfvwy/

使用宽度和高度0，隐藏溢出。使用CSS3 transitation将它们设置为auto。

查看小提琴（它是您的代码，增加了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;
}

Answer 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/

Answer 3

您应该首先隐藏所有子菜单，并在悬停父菜单时显示它们。像

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

在这里查看更新的小提琴 http://jsfiddle.net/wyy7e61o/6/

下拉菜单效果

3 个答案: