How to fix unclickable links in a nested menu dropdown?

Hello, I have created a nested menu, the first layer of visible options have links inserted, but when clicked they just open the dropdown below, rather than being clickable as they should. Like this:

How we would like it to function is more like this, where all levels of the menu are clickable:
https://shop.neos.co.uk/pages/boost

Using the latest refresh theme. Thanks for your help guys!

Hi @biznazz101
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

Sure, thank you!

Storefront URL: tinyvpn.app

Pass: Tiloht

Hi @biznazz101

You can follow these suggestions to create a nested menu

Go to themes => edit code => find file header-dropdown-menu.liquid

=> Find the code as below:

 <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                {% render 'icon-caret' %}
              </summary>

=> Replace it into this code

              <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                    <a
                        id="HeaderMenu-{{ link.handle }}-{{ link.handle }}"
                        href="{{ link.url }}"
                        class="header__menu-item list-menu__item link link--text focus-inset 
                        caption-large{% if link.current %} list-menu__item--active{% endif %}"
                        {% if link.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ link.title | escape }}
                      </a>
                </span>
                {% render 'icon-caret' %}
              </summary>

If it work, please mark as a solution. Good luck!

This did work, but it is making the menu options appear at different heights on header rather than a straight line:

Is there a way I can fix that? Thank you for the help!

I used this code and my menu now looks like this is there a fix for this the drop down is below the rest of the items