Question

我有一个博客，位于blogger.google.com。

最近我遇到了一个名为“类别”的下拉菜单问题。当我将光标移到它们上面时，子元素（子菜单项）会自动消失。我已经尝试过类似问题的其他答案，但在我的案例中它们没有太大帮助。

当我将鼠标移到它们上面时，我只想让下拉元素保留在它们的位置，以便我可以选择它们。

任何人都可以检查问题吗？

我的网站链接是http://www.techtreck.in

尝试转到类别标签，您会看到我在说什么。

提前许多人..

..希望尽快得到答复!!

Answer 1

如果您将鼠标移动得足够快，则可以正常工作：P

但看起来这是由于类别和实际下拉之间的差距，当你将鼠标向下移动时，它会进入间隙，因此不再触发onmouseover事件，隐藏下拉列表。

您应该将下拉列表的位置向上移动，以便它与“类别”按钮完美对齐。

Answer 2

你的主菜单和子菜单之间有一个隐藏的间隙。用你的萤火虫检查你的css，我在你的代码中发现了这个：

#top li ul {
    background: none repeat scroll 0 0 #111111;
    margin-top: 20px;
    padding: 5px 0 3px;
    width: 187px;
}

现在margin-top: 20px;离主菜单太远了。所以改成它：

#top li ul {
        background: none repeat scroll 0 0 #111111;
        margin-top: 14px;
        padding: 5px 0 3px;
        width: 187px;
    }

它会正常工作。

Answer 3

主菜单和子菜单之间的差距确实是导致问题的原因。 @kakarott解决方案也是我会做的，它是迄今为止最简单的解决方案。但是，如果设计存在差距，您仍然可以通过使用CSS来达到预期的效果。这样的事情可以解决问题：

删除子ul的背景颜色以使其透明
将子ul的边距更改为paddings
也将子li的边距更改为填充
设置子li
将sub ul上的填充添加到sub li的相应填充

（我没有对此进行测试，但如果我没有忘记任何事情，它应该可以解决这个问题）

这样做会使嵌套的ul透明并与父li重叠。这样，当您将鼠标移动到子菜单上时，悬停状态仍会被触发。 Visualy应该没有变化。

当鼠标移到下拉列表上时，下拉菜单消失

3 个答案: