HTML下拉菜单无法正常工作

Question

我正在使用JavaScript和CSS在HTML中进行下拉菜单。我面临的问题是，当在菜单外悬停时，下拉菜单的内容也会扩展。这样我就无法访问页面的其他内容，因为它会重叠。

我该如何解决这个问题？

我可以提供截图。

This is our website

http://prntscr.com/inww2k

Answer 1

我想我找到了你的问题。您的主菜单实现为无序列表（ul），其中每个菜单项都是列表元素（li）。在悬停时弹出的侧面菜单也是一个无序列表，但它位于主菜单的列表元素中。以下是一些代表您的布局的粗略代码：

<ul id='mainMenu'>
    <li> <a src='someaddress'>BOOKS</a>
        <ul id='sideMenu'>
            <li>For Children</li>
            <li>Another side menu item..</li>
        </ul>
    </li>
//rest of the main menu html
</ul>

如果您检查HTML，即使处于隐藏状态，第二个无序列表（上面的id ='sideMenu'）实际上也可以看到超出主菜单边框的边界，并且您的悬停事件似乎放在主要边缘上无序列表（上面的id ='mainMenu'）。换句话说，它根据悬停事件所在的HTML内容按预期工作。

我在这里看到了两个可能的修复：

您可以尝试完全隐藏侧面菜单无序列表，甚至可以使用Jquery / DOM操作将其附加到html。假设你的mainMenu ul的其余html将包含在菜单边界中。

或者可能更简单的修复，您可以从列表元素或li更改悬停事件（到包含指向BOOKS页面的链接的锚标记（它在您的html中有类“icemega_active iceMenuTitle”）。