Align li inside ul to the bottom

Question

I have a li element inside a ul list that I wish to align to the bottom.

+------+
| li1  |
| li2  |
| li3  |
|      |
|      |
|      |
| li4  |
+------+

How can I do this?

WHAT I HAVE TRIED:

li4 {
  position: fixed;   
  bottom: 0;
}

This moved the li4 to the bottom. However, since the ul is inside a hidden menu, li4 will appear even if I close the menu (this is not what I want) because of the position: fixed

Answer 1

If i understand properly then please try this.

   

 ul {
        position: relative;
        height: 200px;
    }
    
ul li.li4 {
       position: absolute;
       bottom: 0;
    }

<ul>
   <li>li1</li>
   <li>li3</li>
   <li>li2</li>
   <li class="li4">li4</li>
</ul>

Thanks.

Answer 2

position: fixed; will always display that li.
Instead make the following changes in your code i.e., "position: absolute" to child li ,and "position: relative" to parent li.

I have added the snippet here

.sub-menu { display: none; }

#li4 { 
position: absolute;
bottom: 0;
}

.main-menu>li:hover  .sub-menu { 
  display: block;
  position: relative;
  height: 100px;
}

<ul class="main-menu">
  <li>item1</li>
  <li>item2
  <ul class="sub-menu">
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
      <li id="li4">li4</li>
    </ul></li>
  <li>item3</li>
  <li>item4</li>
    
</ul>  

I have created a main-menu which has 4items(item1,item2,item3,item4), and 2nd item(item2) is having some child sub-items(li1,li2,li3,li4).

Hovering on parent li will make the child ul to "display: block" here which was initially "display: none"