javascriptでホバーul関数を作成しようとしています

メニューを表示するul上に単純なホバーを作成しようとしています。改善のための提案はありますか？javascriptでホバーul関数を作成しようとしています

<!DOCTYPE> 
     <html> 
      <head> 
       <style> 
        body{ margin: 0px; text-align: center; height:2000px;} 

        nav { 
         color:white; 
         background-color:black; 
         width:100%; 
         height:60px; 
        } 

        nav ul { 
          margin:0; 
          padding:0; 
          text-decoration: none; 
          list-style:none; 
          position: relative; 
        } 


        nav ul li { 
         padding-top:11px; 
         float:left; 
         display:inline-block; 
        } 

        nav ul li a { 
          display: block; 
          color:white; 
          text-decoration: none; 
          height:45px; 
          width: 200px; 
          line-height: 43px; 
          text-decoration: none; 
        } 

        nav ul ul { 
        position:absolute; 
        width:150px; 
        ; 
        } 
        nav ul ul li { 
        display:block; 
        background: black; 
        } 


       </style> 
       <script> 
        var child = document.getElementById("child"); 
        function displayNav() { 
         if(child) { 
          child.style.display = "none"; 
         } else { 
          child.display.style = "block"; 
         } 
        } 
       </script> 
      </head> 
      <body> 
       <nav> 
        <ul> 
         <li><a href="#">Practice Hover</a> 
          <ul onmouseover="displayNav(this)" id = "child"> 
           <li><a href="#">Pr</a></li> 
           <li><a href="#">Ac</a></li> 
           <li><a href="#">Ti</a></li> 
           <li><a href="#">Ce</a></li> 
          </ul> 
         </li> 
        </ul> 
       </nav> 
      </body> 
     </html>

出典

2016-12-06 Nicholas Rotondo

まず、その後、CSSを使用してメニューを作成し、絶対的に必要とされていませんジャバスクリプト、取り除きます。 – junkfoodjunkie

私はJavaScriptを練習しようとしていますが、そのコメントは必要ありません@junkfoodjunkie –

"修正と説明" ...？あなたは私たちにまだ特定の問題を与えていません... – JAAulde

いいえJS、ただCSSです。

ul { 
 
    list-style-type: none; 
 
    } 
 
ul ul { 
 
    display: none; 
 
    } 
 
.child:hover ul { 
 
    display: block; 
 
    }

<nav> 
 
<ul> 
 
    <li class="child"><a href="#">Practice Hover</a> 
 
    <ul> 
 
    <li><a href="#">Pr</a></li> 
 
    <li><a href="#">Ac</a></li> 
 
    <li><a href="#">Ti</a></li> 
 
    <li><a href="#">Ce</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</nav>

出典

2016-12-06 00:57:21 junkfoodjunkie

javascriptでホバーul関数を作成しようとしています

答えて

関連する問題