在p：layout中悬停后，JSF PrimeFaces MenuBar下拉子菜单消失 [英] JSF PrimeFaces MenuBar dropdown submenu disapearing after hover in p:layout

问题描述

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

Doing some application in JSF PrimeFaces 3.1.1 (still learning) and I implemented full page layout - Sunny (the <p:layout /> tag). Everytihng is fine, except my menu bar.

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

On hover on the submenu button in the menu, the dropdown submenu shows, but when I want to go by mouse to the submenu, it disappears. The only option is to change the mouse position to the submenu very fast - than it stays. And thats the problem, need it to work normally, not dissappearing.

如果我把布局排除在外，菜单栏再次运行良好。还试图复制&粘贴PF展示代码，问题是一样的。

If I put the layouts out, the menubar works well again. Also tried to copy & paste code from PF showcase, issue was the same.

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

Using JSF 2 on Tomcat 7.0.22.0. Here is something of my code...

模板中的菜单栏：

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

CSS解决溢出问题：

The CSS solving overflow problems:

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

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

感谢您的帮助！

推荐答案

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

Did you happen to set a custom font size for your ui-widget? Personally, I had the following CSS setting:

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

我在Firefox中遇到了与你类似的问题（但在Chrome中没有）。奇怪的是，在将字体大小增加到13px之后，问题得到了解决。

and I experienced similar issue like yours in Firefox (but not in Chrome). Oddly enough, after increasing font-size to 13px the problem was fixed.

这篇关于在p：layout中悬停后，JSF PrimeFaces MenuBar下拉子菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！