title: Change <p:menubar> CSS into RTL
body: <p><img src="https://i.stack.imgur.com/RfzZH.png" alt="enter image description here"></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1" ?&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 dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"&gt;
      &lt;head&gt;
          &lt;title&gt;IGNORED&lt;/title&gt;    
      &lt;/head&gt;
      &lt;style type="text/css"&gt;
          .ui-menu-child{
              left: -60px; width: 8.5em; // or anything you want
          }
      &lt;/style&gt;
  &lt;body&gt;
      &lt;ui:composition&gt;  
          &lt;h:outputScript name="header.js" library="js" target="head"/&gt;
          &lt;p:menubar id="mnubr_main" style="font-size: 75% !important;"&gt;
              &lt;p:submenu styleClass="bmnu_karkard" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;"&gt;  
                  &lt;p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/&gt;  
                  &lt;p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" /&gt; 
                  &lt;p:menuitem value="test1" url="../../../pages/tarefe" /&gt; 
              &lt;/p:submenu&gt;
  
              &lt;f:facet name="options" class="ui-float-left" id="haha"&gt; 
                  &lt;p:commandButton id="btn_exit" title="#{msg.exit}"
                                   icon="ui-icon-exit" style="float: left; margin-right: 5px;"
                                   actionListener="#{userController.logout}" 
                                   oncomplete="handleRedirectRequest(xhr, status, args)"/&gt;
                  &lt;p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/&gt;
              &lt;/f:facet&gt;
          &lt;/p:menubar&gt;
          &lt;p:spacer height="20px"/&gt;
      &lt;/ui:composition&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I use style for change position of <code>.ui-menu-child</code> but not change show popup panel of . </p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .ui-menu-child{
          left: -60px; width: 8.5em; // or anything you want
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>And I try this </p>
  
  <pre><code>&lt;style type="text/css"&gt;
      bmnu_karkard .ui-menu-child{
          left: -60px; width: 8.5em; // or anything you want
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>I use <a href="https://stackoverflow.com/questions/13567851/how-to-change-the-labels-color-of-a-submenu-in-a-menubar">this</a> way but it doesn't work. How can I change style of popup panel of primefaces submenu?</p>