Cambiar funcion de Menu de CSS a JS o JQuery

[Alexis88]

Supongo que la línea que deseas trasladar a JavaScript es esta:

Código CSS:

.nav li:hover > ul { 
    color: #876830; 
    display: block; 
    background-color: #f4eee4; 
}
 

Si en lugar de mostrar el <ul> con el evento hover (que en JavaScript nativo sería mouseover), quieres hacerlo al darle un clic, simplemente tienes que aplicarle el evento click.

Código Javascript:

Array.prototype.forEach(document.querySelectorAll(".nav li"), function (li){
    li.addEventListener("click", function (){
        var ul = this.getElementsByTagName("ul")[0];
 
        //A partir de aquí, aplicas los mismos estilos de la hoja de estilos
        ul.style.color = "#876830";
        ul.style.display = "block";
        ul.style.backgroundColor = "#f4eee4";
    }, false);
});
 

Saludos