如何通过 CSS 重新定位下拉菜单答案

【问题标题】：how to relocation dropdownmenu by CSS如何通过 CSS 重新定位下拉菜单
【发布时间】：2013-10-01 09:37:48
【问题描述】：

我想在标题底部设置 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;
 }

【问题讨论】：

向我们展示你拥有的 CSS？...
我已经在问题中添加了css。

标签： html css drop-down-menu richfaces

【解决方案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;
}

【讨论】：