title: Primefaces <p:selectOneMenu> display issue
body: <p>I have a full page layout. Top layoutUnit is having a menu and selectOneMenu. The menu items are not getting displayed properly. The menu items are overlapping with selectOneMenus.</p>
  
  <p><img src="https://i.stack.imgur.com/f3yy6.jpg" alt="enter image description here"></p>
  
  <p>here is my xhtml code and styles used.</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"&gt;
  
  &lt;h:head&gt;
  
      &lt;style type="text/css"&gt;
  .ui-widget {
      font-size: 12px !important;
  }
  
  **.ui-layout-north {
      z-index: 20 !important;
      overflow: visible !important;
  }
  .ui-layout-north .ui-layout-unit-content {
      overflow: visible !important;
  }**
  
  &lt;/style&gt;
  
  &lt;/h:head&gt;
  
  &lt;h:body&gt;
  
      &lt;p:layout fullPage="true" id="layout1"&gt;
  
          &lt;p:layoutUnit id="top" position="north" size="104"&gt;
              &lt;h:form&gt;
  &lt;p:menubar autoSubmenuDisplay="true" id="menubar1"&gt;
  &lt;/p:menubar&gt;
  &lt;h:panelGroup id="t1"&gt;
                      &lt;p:toolbar rendered="#{menuBean.renderP1}" id="toolbar1"&gt;
                          &lt;p:toolbarGroup align="left"&gt;
  &lt;p:selectOneMenu id="prod" value="#{menuBean.product}"
                                  style="width:155px;" required="true"
                                  requiredMessage="Select a product"&gt;
                                  &lt;f:selectItem itemLabel="Select product" itemValue="" /&gt;
                                  &lt;f:selectItems value="#{menuBean.products}" /&gt;
                                  &lt;!-- Product changed --&gt;
                                  &lt;p:ajax event="change" update="prodVar,brkType,brkRevision"
                                      listener="#{menuBean.productChanged}" /&gt;
  
                              &lt;/p:selectOneMenu&gt;
  
                              &lt;p:spacer width="50" height="10" /&gt;
  
                              &lt;p:selectOneMenu id="prodVar" value="#{menuBean.productVariant}"
                                  style="width:165px;" required="true"
                                  requiredMessage="Select product variant"&gt;
                                  &lt;f:selectItem itemLabel="Select Variant" itemValue="" /&gt;
                                  &lt;f:selectItems value="#{menuBean.productVariants}" /&gt;
                                  &lt;!-- productVariant changed --&gt;
                                  &lt;p:ajax event="change" update="brkType,brkRevision"
                                      listener="#{menuBean.productVariantChanged}" /&gt;
                              &lt;/p:selectOneMenu&gt;
  &lt;/p:toolbarGroup&gt;
                      &lt;/p:toolbar&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/h:form&gt;
          &lt;/p:layoutUnit&gt;
  &lt;p:layoutUnit id="center" position="center"&gt;
              &lt;h:form id="form2"&gt;
                  &lt;h:panelGroup id="t2"&gt;
                      &lt;p:tabView id="tabView" rendered="#{menuBean.renderP2}"&gt;
  
                              &lt;/h:panelGrid&gt;
                          &lt;/p:tab&gt;
  
                      &lt;/p:tabView&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/h:form&gt;
          &lt;/p:layoutUnit&gt;
  
      &lt;/p:layout&gt;
  
  &lt;/h:body&gt;
  
  &lt;/html&gt;
  </code></pre>