Question

我是新手并且学习CSS代码。我想在仪表板菜单中添加下拉子菜单，但我没有关于css下拉响应菜单的经验，也不知道如何应用这个，下面是我从其他资源中找到的代码，我添加仪表板菜单及其中的子菜单。此代码可以在移动设备上运行。

当我在仪表板中添加下拉子菜单时，我导航时css不会消失。以下是代码：

＆＃13;

/* 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");
}

＆＃13;

/* 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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

我在这里向您展示我对parent结构的看法。

:hover仅适用于演示案例。

您可以更改为Javascript click。

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

Answer 2

＆＃13;

/*Style for dropdown links*/

.topnav>li:hover ul a {
  color: #fff;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

.topnav>li:hover ul a:hover {
  color: #fff;
}


/*Hide dropdown links until they are needed*/

.topnav>li ul {
  display: none;
}


/*Make dropdown links vertical*/

.topnav>li ul li {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

.topnav>li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}


/*Display the dropdown on hover*/

.topnav>ul li a:hover+.hidden,
.hidden:hover {
  display: block;
}

＆＃13;

子菜单变为垂直但背景黑色太长：以下是我的问题图片：dropdownmenucss

CSS下拉响应子菜单

2 个答案: