# How to add a sub-menu

> Add a drop-down sub-menu in ProSite by nesting menu items under a parent page in the Edit Menu panel.

Source: https://www.kualo.com/knowledgebase/prosite-pages/how-to-add-a-sub-menu
Updated: 2026-06-09

---

A sub-menu appears as a drop-down in your navigation bar, nested under a parent menu item. This is useful when you have a large number of pages that would make your top-level navigation unwieldy - for example:

![Example of a drop-down sub-menu structure](https://kb-cdn.kualo.com/cc/9e/cc9e270d641a56d5539f1f00464f0cbeef1b36dd.jpg)

## Creating a sub-menu

1. Launch the Site Builder tool from your cPanel.

2. Click on your website menu, then click **Edit Menu** in the panel that appears below it.

   ![Edit Menu option in the Site Builder](https://kb-cdn.kualo.com/7e/00/7e00c6d8a1aaadd0bbc6495c8670d27f8d741804.png)

3. If you have not yet created the page you want as a sub-menu item, click **New Menu Item**. You can clone content from another page or copy selected sections.

   ![New Menu Item button](https://kb-cdn.kualo.com/25/4c/254cb78fc10f6ee28f3577f9487e5941aced3076.png)

   If you have already created your pages, they will appear in the list of menu items:

   ![List of existing menu items](https://kb-cdn.kualo.com/77/a7/77a7bb163ad1ffd94a52b2ea25a97d5279d68619.png)

4. To nest a page as a sub-menu item, **drag and drop** it on top of the parent menu item. In the example below, the **Project A, B and C** items are dragged onto the **Projects** item. Each item becomes indented, indicating it is now a child of that parent.

   ![Drag and drop to create a sub-menu](https://kb-cdn.kualo.com/e7/48/e74817420fa8abbb451bfff3ecaab5d89c663155.gif)

5. Click **Apply**.

   The nested items are removed from the top level of navigation:

   ![Navigation bar after applying sub-menu](https://kb-cdn.kualo.com/48/2c/482cadcfea8116ffb6098c330e0e999e62757817.png)

6. The drop-down does not activate inside the editor. To check how it looks, click **Preview**.

   ![Preview button in the Site Builder](https://kb-cdn.kualo.com/06/9e/069ed13b4da9fe7953840628f2a0575bc2fd72d1.png)

   The drop-down menu should now appear in preview mode:

   ![Drop-down sub-menu in preview mode](https://kb-cdn.kualo.com/d2/42/d2424b5145dd6d802dcfc87c53bf3e452ebc1e0d.gif)

## Adjusting sub-menu styling

If the styling does not look right, your menu may not yet be configured with sub-menu styles. To fix this:

1. Close the preview and click on your menu again.

2. In the right-hand panel, find the menu styling options and select the **Submenu** tab.

   ![Submenu styling tab](https://kb-cdn.kualo.com/0f/65/0f65d0afb2e058633a18827b358c265039b3aeb1.png)

3. If there is no background colour set, click the **Edit** icon next to **Background** and choose your preferred colour.

   ![Selecting a background colour for the sub-menu](https://kb-cdn.kualo.com/f0/55/f0559043dd7d194b0124281295ed182df3867dae.png)

4. Preview the site again to confirm the change. In the example below, a white background has been applied to the sub-menu.

   ![Sub-menu with white background in preview](https://kb-cdn.kualo.com/3f/b0/3fb08b973c71f6a4369036f2556d49cbc4605dd2.png)


---

_Source: Kualo Knowledgebase — https://www.kualo.com/knowledgebase/prosite-pages/how-to-add-a-sub-menu · © Kualo Ltd._