Aligning Menu Group to Menu Item

Question

I'm using Seam and Richfaces to make a menu bar. The code is like this:

<rich:dropDownMenu showDelay="250" hideDelay="0" submitMode="none">
        <f:facet name="label">Tools</f:facet>

        <rich:menuItem>
            <s:link view="/pages/tools/ppaParameters/PpaParametersEdit.xhtml" value="Parameters" id="PpaParametersId" includePageParams="false" propagation="none"/>
        </rich:menuItem>

        <rich:menuGroup value="Security">
            <rich:menuItem>
                <s:link view="/pages/tools/security/ppaModule/PpaModuleEdit.xhtml" value="Module" id="PpaModuleId" includePageParams="false" propagation="none" />
            </rich:menuItem>
        </rich:menuGroup>

    </rich:dropDownMenu>

How can I make the menu item aligns to its "father"?

Ferramentas = Tools

Segurança = Security

Módulo = Module

Answer 1

best way for styling is to use chrome dev tool included in it or firebug with firefox to tell which exact styles are being used with which element.

try to set align to inherit

Answer 2

This happens to me so often you'd think I'd have learned by now: make sure your menu is surrounded by <h:form></h:form> tags.