nav ul li을 나타내는 법 : 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;}"; 
...