Menú desplegable HTML / CSS

No entiendo cómo crear menús desplegables nesteds para un menú de la barra de navegación. Me gustaría usar botones y divs (y no listas / enlaces / bootstrap). Construí algo que creo que es correcto aquí, pero por supuesto no puedo hacerlo funcionar. ¿Podría alguien ayudarme a conseguir que el menú desplegable y el menú desplegable nested funcionen?

.dropdown { background: white; float: left; } .dropdown .dropdown { position: absolute; left: 0; top: 100%; visibility: hidden; opacity: 0; } .dropdown .dropdown .dropdown { left: 100%; top: 0; } button:hover { cursor: pointer; background-color: gray; } button:hover .dropdown { visibility: visible; opacity: 1; } button:hover .dropdown .dropdown { visibility: visible; opacity: 1; }