下拉式菜单。将鼠标悬停在子菜单将出现的位置时下拉答案

【问题标题】：Drop down menu. Sub menu drops down when you hover where it will appear下拉式菜单。将鼠标悬停在子菜单将出现的位置时下拉
【发布时间】：2014-08-05 16:51:48
【问题描述】：

理想情况下，我希望下拉菜单仅在父按钮悬停/单击时出现。但是，当您将鼠标悬停在菜单将出现的任何位置时，子菜单就会出现。我把它放在 JSfiddle 中：

http://jsfiddle.net/7g67j/

理想的结果是对 JS 进行调整，以使下拉菜单仅在其下方的按钮悬停时出现...

$(document).ready(function(){
var w = $(window).width();
if(w > windowWdth) {$('#block_navigation > ul').css('display', 'block');    $('#block_navigation').css('height', '55px');

【问题讨论】：

这对我来说似乎工作正常...我尝试了 Firefox、Chrome 和 IE，它们看起来都不错。你在试什么？
铬。也许我没有很好地解释这个问题。如果您将鼠标悬停在下拉菜单所在的任何位置，它就会显示出来。因此，例如，在“家庭法”下，菜单上的最后一项是“防止虐待”，如果您只需将鼠标放在“防止虐待”按钮出现的位置，就会出现菜单。只有当您将鼠标悬停在顶部的“家庭法”上时，它才会出现。这有意义吗？
哇，这很奇怪。我明白你现在的意思了：P
你的问题是下拉菜单总是在那里，只是不透明度为 0。这（结合你所有的悬停）意味着将鼠标悬停在它们上面会使它们出现。大多数人使用display: block 和display: none 作为下拉菜单（而不是更改不透明度）。尽管jsfiddle.net/7g67j/4 这会杀死你的动画
您也可以尝试更多地处理所有悬停元素。

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

【解决方案1】：

这是您更新后的jsfiddle。你必须添加可见性：隐藏在这个 div 中

#block_navigation ul ul {
    z-index: 1;
    opacity:0;
    visibility: hidden;
}

【讨论】：

有趣...如果这是他们想要做的，这是一些奇怪的用户界面。我从这个问题中不明白这一点（这有点含糊）
好吧，那个“隐藏”属性使得菜单不会显示在它下面的幻灯片上方...尝试使用 Z-index，无法让菜单显示在元素上方下面...
转念一想，其他元素也有 Z-index。我想我们都准备好了。非常感谢您的帮助。