how to relocation dropdownmenu by CSS - html

Question

I would like to set the location of DropDownMenu on the bottom of the header, as the item "Acceuil", and I used a css style. But it doesn't work. My code is as following: using the "styleClass="groupstyle" to adjust the location.
Is anybody knows how to fix the problem? Thanks for your response in advance.
<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>
This is my CSS file:
.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

The position of the menu is defined on the <div> itself, e.g.
<div … style="z-index: 2; left: -7px; top: 2px; width: 119px; display: block;">
This means that any class rules will be overwritten. To prevent this use !important where necessary.
.groupstyle {
font-size: 14px;
position: relative !important;
bottom: -35px !important;
text-decoration: none;
}