Change CSS for menu and submenu - html

Question

I'm creating a menu with three levels for my store in opencart 3.0, the whole programming part I've already done, with your help here. Now, I'm having trouble adjusting CSS, as I need the menus displayed to cascade, but the opencart menu default does not cascade, it's opening all at once, as in the example below.
I need to leave something like this.
The code in my menu.twig looks like this:
{% if categories %}
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
{% for category in categories %}
{% if category.children %}
<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown"><b>
<div style="font-size: 15px;">{{ category.name }}</div>
</b></a>
<div class="dropdown-menu">
<div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
<ul class="list-unstyled">
{% for child in children %}
<li>{{ child.name }}
// begin changes
<ul class="dropdown-menu sub-menu dropdown-inner">
{% set children2 = child.children2 %}
{% for child2 in children2 %}
<li> <a href="{{ child2.href }}" >{{ child2.name }}</a> </li>
{% endfor %}
</ul>
// end changes
</li>
{% endfor %}
</ul>
{% endfor %} </div>
{{ text_all }} {{ category.name }} </div>
</li>
{% else %}
<li>{{ category.name }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</nav>
</div>
{% endif %}
Does Opencart 3.0 already have CSS classes for this? How to make?

Answer 1

In this file:
catalog/view/theme/default/stylesheet/stylesheet.css
Find:
#menu .dropdown:hover .dropdown-menu {
display: block;
}
Replace with:
#menu .dropdown:hover > .dropdown-menu {
display: block;
}
#menu ul ul ul.dropdown-inner {
left: 100%;
top: 0;
display: none;
}
#menu .nav li {
position: relative;
}
#menu ul ul li:hover ul.dropdown-inner {
display: block;
}