# Submenu Problem in Level 3 - 4

**URL:** <https://community.hubspot.com/t/submenu-problem-in-level-3-4/31959>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [February 18, 2021, 10:27am UTC](https://community.hubspot.com/t/submenu-problem-in-level-3-4/31959 "2021-02-18T10:27:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![radwan-wali](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/radwan-wali/32/76463_2.png) [@radwan-wali](https://community.hubspot.com/u/radwan-wali)\
**Post date:** [February 18, 2021, 10:27am UTC](https://community.hubspot.com/t/submenu-problem-in-level-3-4/31959/1 "2021-02-18T10:27:06Z")

</div>

We are going to design Menu in 4 Levels .

We would like to appear menu level 3 in sub menu \<div\> from Menu level 2 .

**I am trying this code :**

```lia-code-sample
{% for child in node %}
 {% if child.level=='2' %}
 <div class="col-lg-4 mb-4">
 <a href="#" class="dropdown-menu_title">{{ child.label }}</a>
 <div class="py-2">
 {% if child.level== '3' %}								 	 
 <a href="#">{{ child.label }}</a>
 {% endif %}
 </div>
</div>
{% endif %}
% endfor %}

```

Submenu not appear .

**Result :**

 ![38239i2BF2615724073171.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/c/2cae5faa6265b06ca285c2ca3b5b2c65f476d5bd.png)

once I move it out .

**Using this code :**

```lia-code-sample
 {% for child in node %}
 {% if child.level=='2' %}
 <div class="col-lg-4 mb-4">
 <a href="#" class="dropdown-menu_title">{{ child.label }}</a>
 </div>
{% endif %}
 <div class="py-2">
 {% if child.level== '3' %}
 <a href="#">{{ child.label }}</a>
 {% endif %}
</div>
{% endfor %}

```

**Result :**

 ![38240i86DE58C2C9028732.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/f/7f3117dda6a2c7e4300aeaf9628fb6b7f2c32f9e.jpeg)

Submenu will appear but outside the \<div\> I have to include it inside \<div\> to appear as the original style .

**Also I tried this :**

```lia-code-sample
<div class="col-lg-4 mb-4">
 {% if child.level=='2' %}
 <a href="#" class="dropdown-menu_title">{{ child.label }}</a>
 {% endif %}
 <div class="py-2">
 {% if child.level== '3' %}
 <a href="#">{{ child.label }}</a>
 {% endif %}
 </div>
</div>

```

Result :

 ![38243iF42E6FF9844D210D.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/5/a5f5f3d855353c2dff212702540155c4802077e9.jpeg)

In HTML code looks perfect in local terminal .

Original HTML code :

```lia-code-sample
<div class="row mb-4">
<div class="col-lg-4 mb-4">
<a href="/themes/" class="dropdown-menu_title">Themes</a>

<div class="py-2">
<a href="#">Food Safety & Chain Control</a>
<a href="#">Health Benefits</a>
<a href="#">Protein Transition</a>
<a href="#">Smart Processing</a>
</div>
</div>
</div>

```

**Result :**

 ![38241iFBC450ABD6647AE4.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/f/fc2839f9373ac635fa72f1b38cc4a15d8c444efb.png)

**Thanks in advance for any advice for this problem.**

---

<div class="post-metadata">

**Author:** ![mangelet](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mangelet/32/83031_2.png) [@mangelet](https://community.hubspot.com/u/mangelet)\
**Post date:** [February 18, 2021, 3:45pm UTC](https://community.hubspot.com/t/submenu-problem-in-level-3-4/31959/2 "2021-02-18T15:45:06Z")

</div>

@radwan-wali you are probably doing it the hard way… may I suggest you try starting out from the output of the menu hubl tag instead:

`{% menu "menu" max_levels=4 %}`

Notice the “max\_levels” param is used to render 4 levels of submenus in this case.