Как расположить дочерний список под конкретным элементом родительского списка?

Question

[Nicknick1]

Имеется следующий список:

Необходимо расположить nav_sub_list под nav-link_two,

Сейчас nav_sub_list отображается как новый блок под nav_list

<ul class="nav_list"> <!--Список ссылок меню-->
            <li><a href="#" class="nav-link_one">test</a></li>
            <li><a href="#" class="nav-link_two">test</a>
            
              <ul class="nav_sub_list"> <!--Список ссылок меню-->
                <li><a href="#" class="nav-sub-link">Sub test</a></li>
                <li><a href="#" class="nav-sub-link">Sub test</a></li>
                <li><a href="#" class="nav-sub-link">Sub test</a></li>
              </ul>
            
            </li>
            <li><a href="#" class="nav-link_three">Test</a></li>
          </ul>

CSS

/*Параметры отображения ссылок - в линию*/
.nav_list > li {
    display: inline;
}
/*Параметры ссылок */
.nav_list > li a {
    padding: 1em;
}

/*Раскрывающийся список */
.nav_sub_list {
    position: absolute;
    padding-left: 0em;
    width: max-content;
}

.nav_sub_list li {
    display: inline-flex;
    justify-content: space-between;
    padding: .0em;
}

Answer 1

[Степан Крапивин]

Замени inline на inline-block

/*Параметры отображения ссылок - в линию*/
.nav_list > li {
    display: inline-block;
}

Comments

[Nicknick1]

Спасибо