Не могу построить выпадающее меню?

Question

[incel]

<li class="dropdown-submenu">
    <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Санкт-Петербург</a>
    <ul class="dropdown-menu" id="id_region_53">
        <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Восточный</a>
            <ul class="dropdown-menu" id="id_region_53_0">
                <a class="dropdown-item" href="#">Калининский</a>
                <a class="dropdown-item" href="#">Красногвардейский</a>
                <a class="dropdown-item" href="#">Невский</a>
           </ul>
        </li>
        <li class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Западный</a>
            <ul class="dropdown-menu" id="id_region_53_1">
                <a class="dropdown-item" href="#">Кронштадский</a>
                <a class="dropdown-item" href="#">Ломоносовский</a>
                <a class="dropdown-item" href="#">Петродворцовый</a>
                <a class="dropdown-item" href="#">Красносельский</a>
           </ul>
        </li>
        <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Северный</a>
            <ul class="dropdown-menu" id="id_region_53_2">
                <a class="dropdown-item" href="#">Приморский</a>
                <a class="dropdown-item" href="#">Выборгский</a>
                <a class="dropdown-item" href="#">Курортный</a>
            </ul>
        </li>
        <li class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Центральный</a>
            <ul class="dropdown-menu" id="id_region_53_3">
                <a class="dropdown-item" href="#">Центральный</a>
                <a class="dropdown-item" href="#">Петроградский</a>
                <a class="dropdown-item" href="#">Василеостровский</a>
                <a class="dropdown-item" href="#">Адмиралтейский</a>
            </ul>
        </li>
        <li class="dropdown-submenu">
         <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Юго-Восточный</a>
            <ul class="dropdown-menu" id="id_region_53_4">
                <a class="dropdown-item" href="#">Павловский</a>
                <a class="dropdown-item" href="#">Пушкинский</a>
                <a class="dropdown-item" href="#">Колпинский</a>
           </ul>
        </li>
        <li class="dropdown-submenu">
         <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Южный</a>
            <ul class="dropdown-menu" id="id_region_53_5">
                <a class="dropdown-item" href="#">Кировский</a>
                <a class="dropdown-item" href="#">Московский</a>
                <a class="dropdown-item" href="#">Фрунзенский</a>
            </ul>
        </li>
    </ul>
</li>

Что я делаю не так? Почему не получается нормальный список?

Comments

[WebDev]

Вы бы на какой-нибудь онлайн редактор залили код. Например codepen.io

[Alams Stoyne]

а вас не смущает что у вас в UL нет LI?

[incel]

WebDev, залил
https://codepen.io/webgospodin/pen/XyYPKx
Но что-то работает не так как у меня.

[incel]

Alams Stoyne, структура вроде бы рабочая, мне кажется здесь вопрос в стилях, потому что все подсписки раскрываются одновременно.

Вот соседний рабочий пример

<li class="dropdown-submenu">
    <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Тверская область</a>
    <ul class="dropdown-menu" id="id_region_60">
        <a class="dropdown-item" href="#">Вышний Волочёк</a>
        <a class="dropdown-item" href="#">Ржев</a>
        <a class="dropdown-item" href="#">Тверь</a>
        <a class="dropdown-item" href="#">Прочие населенные пункты</a>
    </ul>
</li>

[incel]

Выкладываю CSS (остальное в bootstrap)

.dropdown-submenu{  
    position: relative;  
} 
 
.dropdown-submenu a::after{  
    transform: rotate(-90deg);  
    position: absolute;  
    right: 3px;  
    top: 40%;  
} 
 
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{  
    display: flex;  
    flex-direction: column;  
    position: absolute !important;  
    margin-top: -30px;  
    left: 100%;  
} 
 
@media (max-width: 992px) { 
 
    .dropdown-menu{  
     width: 50%;  
    }  
    .dropdown-menu .dropdown-submenu{  
     width: auto;  
    }  
}

.navmenu {
width: 200px;
}

[SpideR-KOSS]

У вас структура должна быть ul li a.

Answer 1

[leni_m]

да, не можете.