Create a custom snippet custom-menu-dropdown.liquid and insert the below code.
{% assign menu = block.settings.menu %}
<ul class="dropdown-menu__list menu-list__link">
{% for link in menu.links %}
<li class="dropdown-menu__item dropdown-menu__item-parent">
<a href="{{ link.url }}" class="dropdown-mian-menu__link">
{{ link.title }}
{% if link.links != blank %}
<span class="dropdown-menu__icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"></path>
</svg></span>
{% endif %}
</a>
{% if link.links != blank %}
<ul class="dropdown-menu__submenu">
{% for child_link in link.links %}
<li class="dropdown-menu__item">
<a href="{{ child_link.url }}" class="dropdown-menu__link">
{{ child_link.title }}
{% if child_link.links != blank %}
<span class="dropdown-menu__icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"></path>
</svg></span>
{% endif %}
</a>
{% if child_link.links != blank %}
<ul class="dropdown-menu__subsubmenu">
{% for grandchild_link in child_link.links %}
<li class="dropdown-menu__item">
<a href="{{ grandchild_link.url }}" class="dropdown-menu__link">
{{ grandchild_link.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
<style>
.dropdown-menu__list,
.dropdown-menu__submenu,
.dropdown-menu__subsubmenu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.dropdown-menu__item {
position: relative;
}
.dropdown-mian-menu__link {
display: flex;
{% comment %} justify-content: space-between; {% endcomment %}
align-items: center;
text-decoration: none;
color: black;
white-space: nowrap;
}
.dropdown-menu__link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 16px;
text-decoration: none;
color: white;
background-color: black;
white-space: nowrap;
}
ul.dropdown-menu__submenu {
padding: 6px 0;
}
.dropdown-menu__icon {
font-size: 12px;
margin-left: 8px;
color: #000000;
}
.dropdown-menu__submenu,
.dropdown-menu__subsubmenu {
display: none;
position: absolute;
background: black;
top: 100%;
left: 0;
z-index: 1000;
min-width: 200px;
}
.dropdown-menu__subsubmenu {
left: 100%;
top: 0;
}
.dropdown-menu__item:hover > .dropdown-menu__submenu,
.dropdown-menu__item:hover > .dropdown-menu__subsubmenu {
display: block;
}
.dropdown-menu__link:hover {
color:rgba(255, 255, 255, 0.52);
}
.dropdown-menu__link {
font-size: 14px;
transition: all 0.5s ease;
}
.dropdown-menu__item-parent > a {
line-height: 50px;
}
</style>
Then include in blocks/_header-menu.liquid file at shown place,
