So basically I have a menu that expands when you hover over it. How can I rewrite my code so that it also expands on click (expand on click, collapse on click again)? You can use JavaScript if necessary, but I've been trying to do everything with just HTML and CSS.
html, body {
font-family: Arial, Helvetica, sans-serif;
}
.navigation {
width: 300px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
.submenu a {
background-color: #999;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li><a href="">产品</a>
<ul class="submenu">
<li><a href="">上装</a></li>
<li><a href="">下装</a></li>
<li><a href="">鞋类</a></li>
</ul>
</li>
<li><a href="">其他</a>
<ul class="submenu">
<li><a href="">联系我们</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">常见问题</a></li>
</ul>
</li>
</ul>
</nav>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I read the details of your question carefully
You can try to fix the code as follows.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> html, body { font-family: Arial, Helvetica, sans-serif; } .navigation { width: 300px; } .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } .mainmenu a { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } .mainmenu a:hover { background-color: #C5C5C5; } .mainmenu li.active .submenu { display: block; max-height: 200px; } .submenu a { background-color: #999; } .submenu a:hover { background-color: #666; } .submenu { overflow: hidden; max-height: 0; -webkit-transition: all 0.5s ease-out; } </style> <body> <nav class="navigation"> <ul class="mainmenu"> <li><a href="javascript:;" onclick="showSubMenu(event)">产品</a> <ul class="submenu"> <li><a href="">上装</a></li> <li><a href="">下装</a></li> <li><a href="">鞋类</a></li> </ul> </li> <li><a href="javascript:;" onclick="showSubMenu(event)">其他</a> <ul class="submenu"> <li><a href="">联系我们</a></li> <li><a href="">关于我们</a></li> <li><a href="">常见问题解答</a></li> </ul> </li> </ul> </nav> </body> <script> function showSubMenu(e) { e.target.parentNode.classList.toggle('active'); } </script> </html>