Without jQuery you can do something like this, where you toggle a class .open and show specify it in css.

Whenever one clicks on a list item, this item will be prepended to the list and the class .open will be removed from the parent and css specifies to only show the first item of the list:

ul:not(.open) li:not(:first-of-type) {
  display: none;
}

const menu = document.querySelector('.menu');

menu.addEventListener('click', (e)=>{

  let listItem = e.target;
  
  if(menu.classList.contains('open'))
    menu.prepend(listItem);
  
  listItem.closest('ul').classList.toggle('open');
  
})

ul {
    width: 170px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    position: relative;
    border: 1px solid #901c1c;
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
}

li {
    background-color: #901c1c;
    padding: 20px 20px;
}

li:not(:first-child) {
    position: relative;
}

li:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 5px;
    width: 90%;
    height: 1px;
    background-color: rgb(255, 255, 255);
}

ul::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 22px;
    width: 0.6em;
    height: 0.6em;
    border-left: 0.2rem solid rgb(255, 255, 255);
    border-bottom: 0.2rem solid rgb(255, 255, 255);
    transform: rotate(315deg);
    transition: transform .3s;
}

ul.open::after {
  transform: rotate(135deg);
}

.arrow-up::after {
    transform: rotate(135deg);
    top: 28px;
}

ul:not(.open) li:not(:first-of-type) {
  display: none;
}

<ul class="menu">
    <li id="popularity">Popularité</li>
    <li id="date">Date</li>
    <li id="title">Titre</li>
</ul>

With multiple menus as requested:

const menus = document.querySelectorAll('.menu');

menus.forEach(menu =>{
  
  menu.addEventListener('click', (e)=>{

    let listItem = e.target;

    if(menu.classList.contains('open'))
      menu.prepend(listItem);

    listItem.closest('ul').classList.toggle('open');

  });
  
});

ul {
    width: 170px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    position: relative;
    border: 1px solid #901c1c;
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
}

li {
    background-color: #901c1c;
    padding: 20px 20px;
}

li:not(:first-child) {
    position: relative;
}

li:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 5px;
    width: 90%;
    height: 1px;
    background-color: rgb(255, 255, 255);
}

ul::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 22px;
    width: 0.6em;
    height: 0.6em;
    border-left: 0.2rem solid rgb(255, 255, 255);
    border-bottom: 0.2rem solid rgb(255, 255, 255);
    transform: rotate(315deg);
    transition: transform .3s;
}

ul.open::after {
  transform: rotate(135deg);
}

.arrow-up::after {
    transform: rotate(135deg);
    top: 28px;
}

ul:not(.open) li:not(:first-of-type) {
  display: none;
}

<ul class="menu">
    <li id="popularity">Popularité</li>
    <li id="date">Date</li>
    <li id="title">Titre</li>
</ul>

<ul class="menu">
    <li id="popularity2">Popularité</li>
    <li id="date2">Date</li>
    <li id="title2">Titre</li>
</ul>

Working from @prettyInPink's suggested solution, this is the non-jQuery solution I came up with.

This javascript can go anywhere in the file (I think)--I have it in the header.

    <script type="text/javascript" >
    
        function ChangeDropdowns(select_xx)
        {
            bool_debug = false;
            
            arr_menu = document.getElementsByClassName("state");
            
            if (bool_debug) { str_menu = "<?php echo  'header-games.php:ChangeDropdowns - '.__LINE__; ?>" + ":\n\n" + "select_xx = " + select_xx + "\n" + "arr_menu.length = " + arr_menu.length + "\n"; }
            
                if (select_xx.slice(0, 6) == "select") { str_country = select_xx.slice(-2); }
                else { str_country = select_xx.slice(0, 2); }

                for (count=0; count<arr_menu.length; count++)
                {
                    if (bool_debug) 
                    { 
                        str_menu += "str_country = " + str_country + " - ";
                        str_menu += "arr_menu["+ count + "].id.slice(-2) = " + arr_menu[count].id.slice(-2) + "\n";
                        str_menu += "arr_menu[" + count + "] = " + arr_menu[count].id;
                    } // if (bool_debug)
    
                    if (str_country == arr_menu[count].id.slice(-2)) 
                    { 
                        document.getElementById(arr_menu[count].id).style.display="flex"; 
                        if (bool_debug) { str_menu += " - displaying" + "\n"; } 
                    } // if (("states_" + select_xx) == arr_menu[count].id)
                    else
                    { 
                        document.getElementById(arr_menu[count].id).style.display="none"; 
                        if (bool_debug) { str_menu += " - hiding" + "\n"; } 
                    } // if (("states_" + select_xx) == arr_menu[count].id) else
                } // for (count=0; count<arr_menu.length; count++)
            
            if (bool_debug) { alert(str_menu); }
                                
        } // function ChangeDropdowns(select_xx)

    </script>

This is the first drop-down menu:

<ul id="ul_XX" class="menu country">
    <li id="select_XX" onclick="test(this.id);">Please Choose Nation of Residence</li>
    <li id="us">United States</li>
    <li id="gu">Guam</li>
    <li id="pr">Puerto Rico</li>
    <li id="um">United States Minor Outlying Islands</li>
    <li id="vi">Virgin Islands, U.S.</li>
    <li id="au">Australia</li>
    <li id="ca">Canada</li>
    <li id="va">Holy See (Vatican City State)</li>
    <li id="ie">Ireland</li>
    <li id="im">Isle of Man</li>
    <li id="gb">United Kingdom</li>
    <li id="vg">Virgin Islands, British</li>
</ul>

The <ul> for the states for the "United States" is awfully long, so I'll just give you the <ul>'s for the "United States Minor Outlying Islands" and "Virgin Islands, U.S.":

<ul id="ul_vg" class="menu state twoup">
    <li id="select_vg" onclick="test(this.id)">Please Choose Island of Residence</li>
    <li id="vg_AN">Anegada</li>
    <li id="vg_VD">Jost Van Dyke</li>
    <li id="vg_TO">Totola</li>
    <li id="vg_VG">Virgin Gorda</li>
</ul>

<ul id="ul_vi" class="menu state twoup">
    <li id="select_vi" onclick="test(this.id)">Please Choose Island of Residence</li>
    <li id="vi_SC">Saint Croix</li>
    <li id="vi_SJ">Saint John</li>
    <li id="vi_ST">Saint Thomas</li>
</ul>

This javascript has to go after your last second-level menu--I'm not sure why. :-(

<script type="text/javascript" >

    function test(select_xx)
    {   
        bool_debug = false;
    
        const menu = document.getElementById("ul_" + select_xx.slice(-2));

        if (bool_debug)
        {
            str_nodes = "<?php echo  'function index.php:test(select_xx) - '.__LINE__; ?>" + ":\n\n" ;
            str_nodes += "select_xx = " + select_xx + "\n";
            for (let count = 0; count < menu.length; count++) 
            {
                str_nodes += "node[" + count + "] = " + menu[count].id + "\n";
            } // for (let count = 0; count < nodeList.length; count++)
            str_nodes += "\n" + "ul_" + select_xx.substr(-2);
            alert(str_nodes);
        } // if (bool_debug)

        menu.addEventListener("click", (e)=>
            {
                bool_debug = false;
                
                let listItem = e.target;
    
                if (bool_debug) { alert("<?php echo  'function index.php:test(select_xx) - '.__LINE__; ?>:\n\n" + "listItem.id = " + listItem.id); }
          
                if(menu.classList.contains("open")) { menu.prepend(listItem) };
          
                listItem.closest("ul").classList.toggle("open");
                
                ChangeDropdowns(listItem.id);
            } // "click", (e)=>
        ) // ul_select_xx.addEventListener("click", (e)=>
        
    } // function test()

</script>

I had to do a lot of debugging to get this to work, and I'm leaving what debugging code I needed in case you need it--obviously you can delete this from your code when/if it works for you.

You can see this code working in its full glory at https://www.ocetacea.net/Games/indextest.php

I hope this helps.