search

Home  >  Q&A  >  body text

Rewrite the title to: How to change hover-expand menu to click-expand

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>

P粉090087228P粉090087228317 days ago444

reply all(1)I'll reply

  • P粉320361201

    P粉3203612012024-01-17 09:26:48

    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>

    reply
    0
  • Cancelreply