Question

How can this be achieved using vanilla javascript? Following uses jQuery syntax.

$(function(){
    $("ul.dropdown li").hover(
        function(){
            $(this).addClass("hover"); 
            $('ul:first',this).css('visibility', 'visible');
        },
        function(){
            $(this).removeClass("hover");
            $('ul:first',this).css('visibility', 'hidden');
        }
    );
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » "); 
});

Answer 1

Something like this is similar:

document.body.addEventListener(
    'load',
    function(){
        var elements = document.querySelectorAll("ul.dropdown li");
        for(var i = 0, l = elements.length; i < l; i++){
            var e = elements[i];
            e.addEventListener('mouseover', function(e){
                e.setAttribute('class', e.getAttribute('class') + ' hover');
                document.querySelector("ul.dropdown li").style.visibility = 'visible';
                e.style.visibility = 'visible';
            })
            e.addEventListener('mouseout',  function(e){
                e.setAttribute('class', e.getAttribute('class').replace(' hover',''));
                document.querySelector("ul.dropdown li").style.visibility = 'hidden';
                e.style.visibility = 'hidden';
            })
        }
        document.querySelector("ul.dropdown li ul li:has(ul)").querySelector("a:first").innerHTML += " &raquo; "; 
    }
)

(But not the same)