Styling child categories from parent categories in bootstrap 5 navbar

Question

I seem to be having difficulty with creating (or styling at least) a multilevel dropdown for my categories using bootstrap 5.

What I'm trying to do is:

Dresses
  -- Winter
  -- Summer
  -- Etc

So essentially sub categories under the parent categories.

My navbar code is:

<!-- nav bar -->
<ul class="nav nav-pills ms-auto">              
    <li class="nav-item"><a href="<?= urlFull(); ?>" class="nav-link <?= ($_SERVER['PHP_SELF'] == "/index.php") ? "active" : ""; ?>" aria-current="page">Home</a></li>                              
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Browse By Category</a>
        <ul class="dropdown-menu">
          <?php $categories = DB::getInstance()->select("SELECT * FROM `categories` ORDER BY `category_name` ASC"); ?>
          <?php foreach ($categories as $category) { ?>
                <?php $subcategories = DB::getInstance()->select("SELECT * FROM `categories_sub` WHERE `categories_sub_id_main`={$category['category_id']} ORDER BY `categories_sub_name` ASC") ?>
                <li>
                    <a class="dropdown-item" href="<?= urlFull(); ?>category.php?categoryId=<?= $category['category_id']; ?>"><?= $category['category_name']; ?><?php if (count($subcategories)) { echo " &raquo;"; } ?></a>
                    <?php if (count($subcategories)) { ?>
                        <?php foreach ($subcategories as $subcategory) { ?>
                            --&nbsp;<a href="javascript:void()"><?= $subcategory['categories_sub_name'] ?></a>
                            <li class="dropend">
                                <ul class="dropdown-menu dropdown-submenu shadow">
                                  <li><a class="dropdown-item" href="javascript:void()"><?= $subcategory['categories_sub_name'] ?></a></li>
                                </ul>
                          </li>
                        <?php } ?>
                    <?php } ?>
                </li>
          <?php } ?>
        </ul>
    </li>               
    <li class="nav-item"><a href="<?= urlFull(); ?>sale.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == "/sale.php") ? "active" : ""; ?>"><span class="text-danger"><strong>SALE</strong></span></a></li>                 
    <li class="nav-item"><a href="<?= urlFull(); ?>faq.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == "/faq.php") ? "active" : ""; ?>">FAQ</a></li>                      
    <li class="nav-item"><a href="<?= urlFull(); ?>contact.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == "/contact.php") ? "active" : ""; ?>">Contact</a></li>
</ul>    

I thought this would be easier to implement using bootstrap as there are usually lots of examples, my PHP code is right, it loops the subcategories out under the main ones, it seems to be the styling I'm having issues with.

The sub categories should not appear until they are hovered over, from reading up i need to use a dropend class at one point I know that much from reading up, an example of the issue can be seen on: https://www.sapphire-wave.com/.

I think I'm on the right path, any help on how to fix the issue would be great.