It took a while for me to figure out how to get this to work. Thus, I thought I would post it here to help others that are trying to do the same thing.

Consider a menu of the form:

Fruit And Vegetables          ==> http://www.mysite.com/fruit_and_vegetables/index.html

->Fruit                              ==> http://www.mysite.com/fruit_and_vegetables/fruit/index.html

---->Apples                        ==> http://www.mysite.com/fruit_and_vegetables/fruit/apples.html

---->Bananas                    ==> http://www.mysite.com/fruit_and_vegetables/fruit/bananas.html

->Vegetables                    ==> http://www.mysite.com/fruit_and_vegetables/vegetables/index.html

I had difficulty getting the link on the menuGroup for Fruit to work such that if someone clicked on Fruit, then they would be navigated to http://www.mysite.com/fruit_and_vegetables/fruit/index.html.

I finally got it to work as such:

<rich:menuGroup styleClass="mainBarA_dropDownMenuAGroupAContainingIconFacetA">

     <f:facet name="icon">

          <h:outputLink styleClass="mainBarA_dropDownMenuALink"  value="http://www.mysite.com/fruit_and_vegetables/fruit/index.html">

               <s:conversationId/>

               <h:outputText value="Fruit"/>

          </h:outputLink>

     </f:facet>

     <rich:menuItem styleClass="mainBarA_dropMenuItemA" value="Apples">

          <h:outputLink value="http://www.mysite.com/fruit_and_vegetables/fruit/apples.html>

               <s:conversationId/>

          </h:outputLink>

     </rich:menuItem>

</rich:menuGroup>

<rich:jQuery selector=".mainBarA_dropMenuItemA"

            query="click(function() {location.href = jQuery(this).find('a').attr('href') })"/>

In the css file:

.mainBarA_dropDownMenuAGroupAContainingIconFacetA {

    text-indent: 26px;

}

The

Hope that helps any others who want to do similar.