Question

我只想在显示菜单的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>

Answer 1

没有JS，只有CSS。

＆＃13;

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

＆＃13;

<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>

＆＃13;

试图用javascript创建一个悬停ul函数

1 个答案: