我是新手,正在学习 CSS 代码。我想在仪表板菜单中添加下拉子菜单,但我没有关于 css 下拉响应菜单的经验,也不知道如何应用它,下面是我从其他资源中找到的代码,我添加了仪表板菜单和其中的子菜单。此代码可以在移动设备上运行。
当我在仪表板内添加下拉子菜单时,CSS 不会在我导航时消失。以下是代码:
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<ul class="topnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li>
<a href="#dashboard">Dashboard</a>
<ul class="hidden">
<li><a href="#">Profile</a></li>
<li><a href="#">Change Password</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
最佳答案
我在这里向您展示了我对 parent
结构的理解。
:hover
仅用于演示。
您可以更改为 Javascript 单击
。
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
.hidden{display:none}
#dashboard:hover + .hidden{display:block !important}
.hidden{display:none}
.upper:hover .hidden{display:block}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<ul class="topnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="upper"><a href="#dashboard">Dashboard</a>
<ul class="hidden">
<li><a href="#">Profile</a></li>
<li><a href="#">Change Password</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
关于javascript - CSS下拉响应式子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50302723/