成年女人天堂香蕉网,9i看片成人免费

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Jadi pada asasnya saya mempunyai menu yang mengembang apabila anda menuding di atasnya. Bagaimanakah saya boleh menulis semula kod saya supaya ia juga berkembang pada klik (kembangkan pada klik, runtuh pada klik sekali lagi)? Anda boleh menggunakan JavaScript jika perlu, tetapi saya telah cuba melakukan segala-galanya dengan hanya HTML dan 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="">產(chǎn)品</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="">聯(lián)系我們</a></li>
        <li><a href="">關(guān)于我們</a></li>
        <li><a href="">常見問題</a></li>
      </ul>
    </li>
  </ul>
</nav>

<!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)">產(chǎn)品</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="">聯(lián)系我們</a></li> <li><a href="">關(guān)于我們</a></li> <li><a href="">常見問題解答</a></li> </ul> </li> </ul> </nav> </body> <script> function showSubMenu(e) { e.target.parentNode.classList.toggle('active'); } </script> </html>