CSS下拉响应子菜单

Question

I am newbie and learning about CSS code. I want to add the dropdown submenu in the dashboard menu but I don't have exprience about css dropdown responsive menu and don't know how to apply this, bellow are the code that I found from other resources and I add the dashboard menu and the submenu inside it. This code can be run in mobile.

When I add the dropdown submenu inside the dashboard, The css do not disappear when I navigate it. Here are the codes:

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

Answer 1

I show you here how I meant with a parent structure.

:hover is just for demo case.

You can change to 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

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

The sub menu became vertical but the background black color is too long: Below are the image of my problem: dropdownmenucss