如何在网站标题中改进代码来制作下拉菜单？

Question

I'm making a new website on an old website basis. I need to add to one parent header element three different childs. What do I need to change in my header code, to see drop-down menu that consist of childs when I point on some parent button in header menu?

I am using Laravel. Website has its own cms. I added there new pages, and to page "Services" I added three childs "Website making", "Blockchain", "Marketing". But in header I can see only button Services, and when I point on it, nothing happen.

{{-- Menu --}}

<div id="main-nav-container" class="collapse navbar-collapse">
                <div class="d-flex justify-content-center flex-wrap justify-content-lg-between align-items-lg-center flex-grow-1">
                    <div class="main-nav-items flex-grow-1">
                        <ul class="list-unstyled m-0 d-lg-flex align-items-lg-center justify-content-lg-between">

{{-- Links to pages --}}

                    @php ($firstLevelMenuItems = getFirstLevelMenuItems(true))
                    @foreach ($firstLevelMenuItems as $menuItem)

                        @php($anchorLink = getFullPageUrlForLocale($menuItem, getCurrentLocaleCode()))
                        @php($clearAnchorLink = null)


                        @php($menuIsActive = false)
                        @if($page instanceof \Modules\CMS\Entities\Page)
                            @php($pageParent = $page->parent()->first())
                        @endif



                        {{-- Saerching pages active menu element --}}
                        @if($page instanceof \Modules\CMS\Entities\Page && $page->template != 'pages.home.index')
                            @if($menuItem->id == $page->id)
                                @php($menuIsActive = true)
                            @endif
                            @if($menuItem->id == $pageParent->id && $pageParent->template != 'pages.home.index')
                                @php($menuIsActive = true)
                            @endif
                        @endif


                        <li class="{{ $menuIsActive ? 'active' : '' }}">
                            <a href="{{ $anchorLink }}" data-clear-url="{{ $clearAnchorLink }}" >
                                {{ $menuItem->translateOrNew(getCurrentLocaleCode())->title }}
                            </a>
                        </li>
                    @endforeach
                        </ul>
                    </div> <!-- .main-nav-items -->
                </div> <!-- .d-lg-flex -->
            </div> <!-- #main-nav-container -->

In HTML it must be like that:

<div id="main-nav-container" class="collapse navbar-collapse">
            <div class="d-flex justify-content-center flex-wrap justify-content-lg-between align-items-lg-center flex-grow-1">
              <div class="main-nav-items flex-grow-1">
                <ul class="list-unstyled m-0 d-lg-flex align-items-lg-center justify-content-lg-between">
                  <li class="active"><a href="#">HomePage</a></li>
                  <li><a href="#">About Us</a></li>
                  <li class="has-sub">
                    <a href="#">Services</a>
                    <ul>
                      <li><a href="#">Marketing</a></li>
                      <li><a href="#">Website making</a></li>
                      <li><a href="#">Blockchain</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Portfolio</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">Contacts</a></li>
                </ul>
              </div> <!-- .main-nav-items -->
            </div> <!-- .d-lg-flex -->
          </div> <!-- #main-nav-container -->