title: Flexbox self-align not working
body: <p>I am trying to create a simple nav menu using flexbox. My issue here is that i want to position the li.dropdown-c to the right side of the menu using align-self. I have tried something but its not working. Can anyone tell me what is wrong?</p>
  
  <pre><code>&lt;nav&gt;
          &lt;div class="top"&gt;
              &lt;ul class="main-ul"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown-c"&gt;&lt;a href="#"&gt;Four&lt;/a&gt;
                      &lt;ul class="in-ul"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Six&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Seven&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Eight&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Nine&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Ten&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      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;
  }
  </code></pre>