Как добавить многоуровневый выпадающий список в шаблон Django?

Я пытаюсь добавить выпадающий список в мою панель навигации в base.html, который показывает несколько категорий из магазина. Каждая из этих категорий имеет подкатегорию, связанную с ней. Я создал модель в Django, которая отображает эти отношения следующим образом.

models.py

class CategoryView(models.Model):
    parent = models.ForeignKey('self', related_name='children', on_delete=models.CASCADE, blank = True, null=True)
    title = models.CharField(max_length=100) 
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

И я передаю эту модель в шаблон с помощью контекстных процессоров следующим образом

def categoriesdropdown(request):
    catg = CategoryView.objects.filter(parent=None)
    context = {'catg':catg}    
    return context

Теперь я пытаюсь отобразить эти категории и подкатегории в виде многоуровневого выпадающего списка с помощью bootstrap. Я попробовал реализовать практически все решения из ответов здесь:

Bootstrap 4: многоуровневый даун внутри навигации

Отсутствует выпадающее подменю Bootstrap

https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/

Но, похоже, ничего не работает.

Ниже показан выпадающий список из моего шаблона.

base.html

<div class="nav-item dropdown">
    <a href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Categories</a>
    <ul class="dropdown-menu dropdown-menu2" aria-labelledby="dropdownMenuLink">
    {% for category in catg %}
        <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#" id="multilevelDropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ category.title }}</a>
            <ul class="dropdown-menu2" aria-labelledby="multilevelDropdownMenu1">
                {% for subcategory in category.children.all %}
                    <li><a href="#" class="dropdown-item">{{ subcategory.title }}</a></li>
                {% endfor %}
            </ul>
        </li>
    {% endfor %}
</ul>

Я вижу, что все категории и подкатегории правильно перечислены в выпадающем списке, однако мои подкатегории отображаются прямо под категориями, а не как выпадающий список следующего уровня.

Примечание: Выпадающий тумблер отображается как есть и не работает.

base.css

.dropdown-submenu {
    position: relative;
  }
  
.dropdown-submenu .dropdown-menu2 {
top: 10%;
left: 100%;
margin-top: -1px;
}
  
.navbar-nav li:hover > ul.dropdown-menu2 {
    display: block;
} 

Как заставить переключатели категорий работать и отображать подкатегории только при нажатии или наведении на них курсора?

<div class="nav-item dropdown">
<a href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Categories</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    {% for category in catg %}
        <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#" id="multilevelDropdownMenu{{ category.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ category.title }}</a>
            <ul class="dropdown-menu" aria-labelledby="multilevelDropdownMenu{{ category.id }}">
                {% for subcategory in category.children.all %}
                    <li><a href="#" class="dropdown-item">{{ subcategory.title }}</a></li>
                {% endfor %}
            </ul>
        </li>
    {% endfor %}
</ul>

    /* Style for the multilevel dropdown */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
}

.dropdown-submenu:hover .dropdown-menu {
    display: block;
}

.navbar-nav .dropdown-menu {
    display: none;
}

.navbar-nav .dropdown-menu.show {
    display: block;
}