CSS problem please (the way sub-menus appear)

I hope I'm posting my question in a right place. I have installed a new theme for my Joomla 3.9, everything seems to be OK, but there is a very annoying problem related to menus. Consider the following menus/sub-menus: Main menu items:

Menu item 1       Menu item 2       Menu item 3 . . .

Sub-menu 1

Sub-menu 2

Sub-menu 1 of sub-menu 1

This way, the "Sub-menu 1 of sub-menu 1" is displayed below all items. This way, I cannot click that, because moving the mouse from "Menu item 1", causes the "Sub-menu 1 of sub-menu 1" to disappear because, there is no mouse hovering over it. So the way I want it to be shown is:

Menu item 1       Menu item 2       Menu item 3 . . .

Sub-menu 1      Sub-menu 1 of sub-menu 1

Sub-menu 2

I've copied a few CSS codes related to that special sub-menu, and it is as follows:

.navbar-default ul.nav-child li a {
text-align: right !important;

.navbar-default ul.nav-child li a {
color: #333;
display: block;
font-size: 12px;
padding: 10px 15px;
white-space: nowrap;

.navbar-default .nav li a {
letter-spacing: 0 !important;

May someone help me please? Thanks in advance...