Flexbox self-align not working

Question

Я пытаюсь создать простое навигационное меню с использованием flexbox. Моя проблема здесь в том, что я хочу расположить li.dropdown-c в правой части меню, используя self-self. Я что-то пробовал, но не работал. Может ли кто-нибудь сказать мне, что не так?

<nav> 
     <div class="top"> 
      <ul class="main-ul"> 
       <li><a href="#">One</a></li> 
       <li><a href="#">Two</a></li> 
       <li><a href="#">Three</a></li> 
       <li class="dropdown-c"><a href="#">Four</a> 
        <ul class="in-ul"> 
         <li><a href="#">Five</a></li> 
         <li><a href="#">Six</a></li> 
         <li><a href="#">Seven</a></li> 
         <li><a href="#">Eight</a></li> 
         <li><a href="#">Nine</a></li> 
         <li><a href="#">Ten</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 

CSS:

* { 
    padding:0px; 
    margin:0px; 
} 

body { 
    font-family: sans-serif; 
    color:lightcoral; 
    background:#506679; 
} 

ul { 
    list-style: none; 
} 

a { 
    color:grey; 
    padding:10px 20px; 
} 

.main-ul { 
    display: flex; 
    justify-content: flex-start; 
} 

li.dropdown-c { 
    display: flex; 
    align-self: flex-end; 
} 

Answer 1

Свойство Align-я работает только для того же направления, как ALIGN-содержание, не оправдывает содержание. Вместо этого, положите margin-left от auto на li.dropdown, и это должно работать.

li.dropdown { 
    display: flex; 
    margin-left: auto; 
} 

Также после проверки этого кода вы поняли, что вы даже не выбрали ли правильно. У него есть класс dropdown-c, а не выпадающее меню:

li.dropdown-c { 
    display: flex; 
    margin-left: auto; 
}