как перемещение dropdownmenu по CSS

Question

Я хотел бы установить расположение DropDownMenu в нижней части заголовка, как элемент «Acceuil», и я использовал стиль css. Но это не сработает. Мой код выглядит следующим образом:., Используя «styleClass =» GroupStyle», чтобы настроить расположение

Кто-нибудь знает, как решить эту проблему, спасибо за ответ заранее

<rich:toolBarGroup> 
    <s:link id="menuHomeId" view="/home.xhtml" value="#{messages.Home}" 
     propagation="none" styleClass="groupstyle"/> 
</rich:toolBarGroup> 

<rich:dropDownMenu showDelay="250" hideDelay="0" submitMode="none" styleClass="groupstyle"> 
    <f:facet name="label">Paramètres</f:facet> 
    <rich:menuItem> 
     <s:link view="/UsersList.xhtml" value="Gestion des utilisateurs" 
      id="UtilisateursId1" includePageParams="false" propagation="none"/> 
    </rich:menuItem> 
    <rich:menuItem> 
     <s:link view="/ImportData.xhtml" value="Import des données" 
      id="ImportDonnees" includePageParams="false" propagation="none"/> 
    </rich:menuItem> 
    <rich:menuItem> 
     <s:link view="/ImExrtportLocaux.xhtml" 
      value="Import/Export des locaux" id="ImpExrportLocaux" 
      includePageParams="false" propagation="none"/> 
    </rich:menuItem> 
    <rich:menuGroup value="Export des données" direction="bottom-right"> 
     <rich:menuItem> 
      <s:link view="/XLSOccupantList.seam" value="Export des occupants" 
       id="ExporteOccupants" includePageParams="false" propagation="none"/> 
     </rich:menuItem> 
     <rich:menuItem> 
      <s:link view="/XLSOccupantList.seam" value="Export des occupants" 
       id="ExporteOccupants2" includePageParams="false" propagation="none"/> 
     </rich:menuItem> 
    </rich:menuGroup> 
    <rich:menuItem> 
     <s:link view="/ContactList.xhtml" value="Contact List" 
      id="ContactId1" includePageParams="false" propagation="none"/> 
    </rich:menuItem> 
    <rich:menuItem> 
     <s:link view="/ReglagesList.xhtml" value="Reglages List" 
      id="ReglagesId1" includePageParams="false" propagation="none"/> 
    </rich:menuItem> 
    <rich:menuItem> 
     <s:link view="/DiversList.xhtml" value="Divers List" id="DiversId1" 
      includePageParams="false" propagation="none" /> 
    </rich:menuItem> 
    <rich:menuItem> 
     <s:link view="/MessageAccList.xhtml" value="Message Acc" id="MessageAcc" 
      includePageParams="false" propagation="none"/> 
    </rich:menuItem> 
</rich:dropDownMenu> 

Это мой CSS?. файл:

.rich-toolbar, .rich-toolbar td { 
background-color: #64BEC6; 
height:120px; 
} 

.rich-toolbar-item, .rich-toolbar-item a { 
background-color: #64BEC6; 
height:50px; 
} 

.rich-toolbar-item a:hover { 
text-decoration: underline; 
} 

.rich-menu-item a:hover{ 
text-decoration: none; 
} 

.groupstyle{ 
    font-size:14px; 
position:relative; 
    bottom:-35px; 
text-decoration: none; 
} 

Answer 1

положение меню определяется на самом <div>, например

<div … style="z-index: 2; left: -7px; top: 2px; width: 119px; display: block;"> 

Это означает, что любые правила класса будут перезаписаны. Для предотвращения этого используйте !important, если необходимо.

.groupstyle { 
    font-size: 14px; 
    position: relative !important; 
    bottom: -35px !important; 
    text-decoration: none; 
}