Подзадачное меню, не отображающееся в горизонтальном меню ⇐ CSS

[Anonymous]

Я планирую создать горизонтальное меню с подразделением для справки, здесь - это взгляд в настоящее время

на мобильном виде. Здесь "src =" https://i.sstatic.net/czu2t2gy.png "/>
Моя проблема здесь - горизонтальное главное меню, когда оно должно быть во многих ссылках, оно должно быть, как это

Brilliant Mind HR System

• 
  Account
  
  Paul Edward Pagente
• Profile
• Logout

System Menu


*ngFor="let currentHeaderMenu of populateHeaderMenus(); let currentHeaderMenuIndex = index"
class="menu-container-item create-pointer border-right-1-ccc"
[class.border-bottom-selected]="currentHeaderMenu.isSelected"
(click)="changeSelectedHeaderMenu(currentHeaderMenuIndex)"
>


{{ currentHeaderMenu.title }}

• 
  {{ childLink.title }}

< /code>





< /code>

Here is the CSS
.title {
font-size: 13px;
position: absolute;
margin-top: 5px;
margin-left: 5px;
}

.circle-img {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
object-fit: cover;
border: 1px solid #8B8B8B;
}

.menu-container {
border: 1px solid #ccc;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
height: 50px;
white-space: nowrap;
background-color: #F8F9FA;
box-shadow: 0 2px 4px rgba(57, 2, 2, 0.05);
}

.menu-container-item {
padding: 8px;
text-align: center;
flex-shrink: 0;
}

.menu-container-icon {
display: inline-flex;
vertical-align: top;
}

.border-bottom-selected {
border-bottom: 4px solid #244DC9;
}
< /code>
Как я могу достичь желаемого вывода? Я использую начальную загрузку 5

Подробнее здесь: https://stackoverflow.com/questions/795 ... ontal-menu