how to represent nav ul li:hover > ul { display: block; } in DOM?

Question

What I want to do is create a menu using something like,

var sheet_nav = document.createElement('style');
sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}";
document.head.appendChild(sheet_nav);

    var sheet_nav_ul = document.createElement('style');
    sheet_nav.appendChild(sheet_nav_ul);

        var sheet_nav_ul_ul = document.createElement('style');
        sheet_nav_ul_ul.innerHTML = "{display: none;}";
        sheet_nav_ul.appendChild(sheet_nav_ul_ul);

    var sheet_nav_ul_li = document.createElement('style');

and this is what I'm looking at as the style sheet up to the point I ended up above

nav 
{
    margin: 100px auto; 
    text-align: center;
}


nav ul ul 
{
    display: none;
}


nav ul li:hover > ul 
{
    display: block;
}

The question I have is how do I represent this part

nav ul li:hover > ul 
    {
        display: block;
    }

using this,

var sheet_nav_ul_li = document.createElement('style');

Answer 1

above js will add below style to header :

<style>nav{ margin: 100px auto; text-align: center;}<style><style>{display: none;}</style></style></style>

try :

var sheet_nav = document.createElement('style');
sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}";
document.head.appendChild(sheet_nav);

var sheet_nav_ul = document.createTextNode('');
sheet_nav.appendChild(sheet_nav_ul);

var sheet_nav_ul_ul = document.createTextNode('nav ul ul {display: none;}');
sheet_nav.appendChild(sheet_nav_ul_ul);

var sheet_nav_ul_li = document.createTextNode('nav ul li:hover > ul {display:block}');
sheet_nav.appendChild(sheet_nav_ul_li);

Answer 2

You should use innerText instead of innerHTML, i.e.:

...
sheet_nav_ul_li.innerText = "nav ul li:hover > ul {display: block;}";
...