JSF PrimeFaces MenuBar下拉子菜单在p：layout中悬停后消失答案

【问题标题】：JSF PrimeFaces MenuBar dropdown submenu disapearing after hover in p:layoutJSF PrimeFaces MenuBar下拉子菜单在p：layout中悬停后消失
【发布时间】：2012-03-04 17:21:53
【问题描述】：

在 JSF PrimeFaces 3.1.1 中做一些应用程序（仍在学习），我实现了全页面布局 - Sunny（<p:layout /> 标签）。一切都很好，除了我的菜单栏。

将鼠标悬停在菜单中的子菜单按钮上时，会显示下拉子菜单，但是当我想通过鼠标转到子菜单时，它会消失。唯一的选择是非常快速地将鼠标位置更改为子菜单 - 而不是停留。这就是问题所在，需要它正常工作，而不是消失。

如果我把布局拿出来，菜单栏又能正常工作了。还尝试从 PF 展示中复制和粘贴代码，问题是一样的。

在 Tomcat 7.0.22.0 上使用 JSF 2。这是我的代码...

模板中的菜单栏：

<p:layoutUnit position="north" size="130">
    <ui:insert name="top">
        <p:menubar id="mainMenu" model="#{menu.mainMenu}" />
    </ui:insert>
</p:layoutUnit>

CSS解决溢出问题：

.ui-layout-north .ui-layout-unit-content {
    overflow: visible !important;
}

.ui-layout-north {
    z-index: 30 !important;
    overflow: visible !important;
}

感谢您的帮助！

【问题讨论】：

标签： java jsf primefaces menubar

【解决方案1】：

您是否碰巧为您的ui-widget 设置了自定义字体大小？就个人而言，我有以下 CSS 设置：

.ui-widget {
    font-size: 12px !important;
}

我在 Firefox 中遇到了类似的问题（但在 Chrome 中没有）。奇怪的是，在将 font-size 增加到 13px 后，问题得到了解决。

【讨论】：

PrimeFaces 的新版本修复了这个问题，但也许这是旧版本的原因。
我正在使用最后一个版本：primefaces-3.4.RC1.jar。错误仍然存在。更改字体大小无济于事。我移动鼠标的速度越慢，子菜单消失的机会就越大。

【解决方案2】：

菜单栏在 IE 或 Chrome 中有效，但在 Firefox 中无法正确显示，您可以在 Check this with firefox a see what happen :) 中看到

我解决了这个问题

    .ui-menubar .ui-menuitem-text {
    font-size: 13px!important; top: -1px;
}

【讨论】：

【解决方案3】：

这并不理想，但它为我解决了问题：

.ui-menuitem-link
{
    max-width: 180px;
}

【讨论】：

【解决方案4】：

请查看下一个链接http://forum.primefaces.org/viewtopic.php?f=3&t=16597。

这是字体的问题。

这也出现在 Firefox 27 和 Prime Faces 4.0 RC 中。

在其他浏览器中运行良好。

【讨论】：