In an attempt to create a menu, I have written the following code:
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');
Here is a snippet of the stylesheet I have developed so far:
nav
{
margin: 100px auto;
text-align: center;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
My main question is how can I incorporate this part:
nav ul li:hover > ul
{
display: block;
}
using only the following code:
var sheet_nav_ul_li = document.createElement('style');