How to change tree menu to be more dynamic like the one in starter kit?

What I have is this and I want it to be more like the one in the Kirby starter kit I want the menu and its sub - menus only come out when my mouse is hovering above it. Would you mind if someone here tell me how to do it?

I have no experience in Web Development, however I can do decent programming.


On a pure CSS basis you could hide the submenu list items by default and only make them visible if parent menu item is hovered. Something like

.submenu {
   display: none;

.menu-item:hover .submenu {
    display: block;

That’s as a start, you better look up CSS in general and CSS nested menus in particular, if you have no experience in that yet.