Из вашего вопроса не совсем понятно, готовы ли вы использовать библиотеки компонентов или нет. Я предполагаю первое:
В Primefaces есть компонент <p:menu>
, который дает вам все, что вам нужно. Вот пример из витрины Primefaces :
<p:menu type="tiered" style="width:180px">
<p:submenu label="Ajax Menuitems" icon="ui-icon ui-icon-refresh">
<p:menuitem value="Save" actionListener="#{buttonBean.save}" update="messages" icon="ui-icon ui-icon-disk" />
<p:menuitem value="Update" actionListener="#{buttonBean.update}" update="messages" icon="ui-icon ui-icon-arrowrefresh-1-w" />
</p:submenu>
<p:submenu label="Non-Ajax Menuitem" icon="ui-icon ui-icon-newwin">
<p:menuitem value="Delete" actionListener="#{buttonBean.delete}" update="messages" ajax="false" icon="ui-icon ui-icon-close"/>
</p:submenu>
<p:submenu label="Navigations" icon="ui-icon ui-icon-extlink">
<p:submenu label="Prime Links">
<p:menuitem value="Prime" url="http://www.prime.com.tr" />
<p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
</p:submenu>
<p:menuitem value="TouchFaces" url="#{request.contextPath}/touch" />
</p:submenu>
</p:menu>
Это создаст меню с подменю.