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;
}

如何通过CSS重定位dropdownmenu

1 个答案: