Question

如何显示隐藏的下拉菜单？它在悬停后没有显示出来。我不知道如何继续，也不知道要添加任何细节。顺便说一句，到目前为止，我还没有太多的JS经验。

<head>
<style>
body {
    padding: 0;
    margin: 0;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
    background-color: orange;
}

li {
    display: inline-block;
    padding: 20px;
}

a {
    text-decoration: none;
    color: black;
    padding: 20px;
    font-size: 20px;
    text-transform: uppercase;
    font-family: arial;
}

a:hover {
    background-color: #bf7500;
}

ul ul {
    display: none;
    position: absolute;
    background-color: green;
}

ul ul li {
    display: block;
}

ul ul li a {
    color: black;
    background-color: orange;
}
</style>
</head>

<body>
<ul>
     <li><a href="one">One</a></li>
     <li><a href="two">Two</a></li>
     <li><a href="three">Three</a></li>
     <li><a href="four">Four</a>
         <ul>
             <li><a href="#">Ay</a></li>
             <li><a href="#">Bee</a></li>
             <li><a href="#">Cee</a></li>
             <li><a href="#">Dee</a></li>
         </ul>
     </li>
</ul>
</body>

Answer 1

您只需更改

即可

ul ul li {
    display:block;
}

要：

ul li:hover ul {
    display:block;
}

这标识了父菜单项（ul li）在其上悬停时（:hover），然后显示子菜单（最终ul）。

下拉菜单不显示

1 个答案: