Im Grunde habe ich also ein Menü, das sich erweitert, wenn man mit der Maus darüber fährt. Wie kann ich meinen Code so umschreiben, dass er auch beim Klicken erweitert wird (bei Klick erweitern, bei Klick wieder reduzieren)? Sie können bei Bedarf JavaScript verwenden, aber ich habe versucht, alles nur mit HTML und CSS zu erledigen.
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-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我仔细阅读了你的问题详情
你可以尝试按照以下修复代码。
<!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>