Что-то не так с выпадаючым меню?

Question

[Bogdan Buchko]

Я что-то делал, делал, но меню второй раз не отрывается.

Хочу сделать как-то так, чтобы при наведённые на элемент в выпадающему меню открывалось еще одно меню слева. Как на рисунку. Но получается вот так:

<div class="navbar">
            <div class="navbar-logo">
                <a class="navbar-logo-link" aria-current="page" href="/">Indi Mops</a>
                <div class="navbar-links">
                    <a class="navbar-link" aria-current="page" href="/">Главная</a>
                    <a class="navbar-link" aria-current="page" href="#">Товары</a>
                    <a class="navbar-link" aria-current="page" href="#">Каталог</a>
                    <a class="navbar-link" aria-current="page" href="#">Доставка</a>
                    <div class="dropdown" style="float:right;">
                        <button class="dropbtn navbar-link">Меню</button>
                        <div class="dropdown-content">
                            <div class="dropleft">
                                <button class="dropbtn navbar-link">Язык</button>
                                <div class="dropleft-content">
                                    <a href="/"><img class="flag" src="assets/flags/ru.svg"></a>
                                    <a href="#"><img class="flag" src="assets/flags/us.svg"></a>
                                </div>
                                <button class="dropbtn navbar-link">Контакты</button>
                                <button class="dropbtn navbar-link">Еще меню</button>
                                <div class="dropleft-content">
                                    <a href="#">Кнопка1</a>
                                    <a href="#">Кнопка2</a>
                                </div>
                              <button class="dropbtn navbar-link">Еще пункт</button>
                            </div>
                        </div>
                      </div>
                </div>
            </div>

.navbar {
    align-items: center;
    color: rgb(230, 230, 230);
    font-size: 20px;
    display:flex;
    line-height: 25px;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 20px;
}

.navbar-logo {
    color: rgb(230, 230, 230);
    font-size: 40px;
    line-height: 50px;
    margin-right: 30px
}

.navbar-links {
    color: rgb(230, 230, 230);
    flex-grow: 1;
    font-size: 20px;
    line-height: 25px;
    display: inline;
}

.navbar-link {
    border-radius:6px;
    color:initial;
    font-size:1.25rem;
    padding:.5rem 1rem;
    color: rgb(230, 230, 230);
}

.navbar-link:hover {
    background-color:#3b3b3b;
    text-decoration:none;
}

.dropbtn {
    border: none;
    cursor: pointer;
    background-color: initial; 
}

.dropdown {
    position: relative;
    display: inline-block;
    top: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #3b3b3b;
    min-width: 100px;
    z-index: 1;
    border-radius:6px;
    text-align: right;
}

.dropdown-content a {
    color: rgb(230, 230, 230);
    padding: .5rem 1rem;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #5b5a5a;
    border-radius:10px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3b3b3b;
}

.dropleft {
    position: relative;
    display: inline-block;
    right: 10;
}

.dropleft-content {
    display: none;
    position: absolute;
    right: 0px;
    background-color: #3b3b3b;
    min-width: 100px;
    z-index: 2;
    border-radius:6px;
    text-align: right;
}

.dropleft-content a {
    color: rgb(230, 230, 230);
    padding: .5rem 1rem;
    text-decoration: none;
    display: block;
}

.dropleft:hover .dropleft-content {
    display: block;
}

.dropleft:hover .dropbtn {
    background-color: #3b3b3b;
}

a {
    text-decoration: none;
    color: rgb(232, 231, 231);
}

body {
    color: rgb(230, 230, 230);
    font-family:  "SansDetect", sans-serif;
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    height: 100%;
    background-color: rgb(12, 12, 12);
    margin-left: 30%;
}

Answer 1

[kryamk]

Я бы порекомендовал вам переделать меню https://html5book.ru/mnogourovnevoe-vypadayushee-menu/