html - how to add a DIV to an A href to expand the menu

Question

I have a menu in html with a dropdown menu

                  <li class="rd-nav-item dropdown shown show">
                <a class="rd-nav-link" id="dropdownmenuheader" data-toggle="dropdown" href="#"> Test drop down</a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="/test">test</a>
                  <a class="dropdown-item" href="/test1">test1</a>
                  <a class="dropdown-item" href="/Test2">test2</a>
                  <a class="dropdown-item" href="/test3">test3</a>
                  <a class="dropdown-item" href="/test4">test4</a>                    
                </div>
              </li>

The menu is by default not expanded (dropdown options not shown)

In the website I would like when they click on the button that the dropdown menu will expand

The code what I now use and is not working is:

<a class="button button-primary button-lg" href="dropdownmenuheader">Click to expand the dropdown menu from the header</a>      

question from:https://stackoverflow.com/questions/66065398/how-to-add-a-div-to-an-a-href-to-expand-the-menu

Answer 1

Waitting for answers