如何表示導航欄：hover> ul {display：block; }在DOM中？

Question

我想要做的就是創建使用類似的菜單，

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'); 

，這就是我看的樣式表到一點上，我結束了上述

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


nav ul ul 
{ 
    display: none; 
} 


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

我的問題是我怎麼使用這代表這部分

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

，

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

Answer 1

JS將下面添加樣式到標題：

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

嘗試：

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

您應該使用的innerText而不是innerHTML的，即：

上述

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