menu with horizontal submenu


I am trying to implement below sample of menu bar. 

How I can start with. Please guide me. Currently "Common\Menu" web block has only single level.

With Kind Regards,


Hi Santosh,

I do not believe there is any components with this pattern readily available (At least from my searching, I couldn't find anything). You would need to customize your own menu block in order to achieve this. You could follow the pattern of a horiztonal menu, for instance from the liverpool template:

By copying the menu web block, and adding a second layer of menus underneath the first placeholder.



Hi Santosh,

I recommend you to use the Liverpool Template and use the following code in your application.

.Menu_DropDownPanel {
    width: 100%;
    left: 0;
    text-align: center;

.Menu_SubItemsPlaceholder {
    max-width: 1240px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;

.Menu_DropDownPanel a.Menu_SubMenuItem,
.Menu_DropDownPanel a.Menu_SubMenuItem:link,
.Menu_DropDownPanel a.Menu_SubMenuItem:visited {
    display: inline-block;
    padding: 9px 30px;
    text-align: center;
    min-width: auto;

I hope this help you, 

Best Regards

José Rosário


Hi Justin, 

Thanks for your time and response. I was having the same idea to put one menu web block under the another menu web block. 

Hi José , thanks a lot for your effort. I used your CSS . This is what I wanted.  :)