how to drop submenu one by one?

in the Navbar the submenu’s class name is submenu , we have 7 submenus ‘ im trying to make something like mouse hover but without using mouse event , i want to show them one by one (show the first and hide it, show the second and hide it) , what is the better way to do that with JavaScript

here is the my code but it show them once one on the other :

function changestyle(){
        var els = document.getElementsByClassName("submenu");
        for(var i = 0; i < els.length-1; i++)
        {
           
          els[i].style.display = 'block';
        
        
        }
        }

i tried another code but it doesn’t work :

function changestyle(){
            var els = document.getElementsByClassName("submenu");
            for(var i = 0; i < els.length-1; i++)
            {

                
                const showone = function(){
                    els[i].style.display = 'block';
                    
                  };
            
                  const hideone = function(){
                    els[i].style.display = 'none';
                    
                  };
                  setTimeout(showone, 2000);
                setTimeout(hideone, 2000);
            }
            }