html - 制作下拉菜单

Question

抱歉，我是网络开发新手。好的，所以我想在您单击它时使 html 和 css 菜单下降。我用谷歌搜索，我所能找到的只是当您将鼠标悬停在菜单上时展开的菜单。

基本上我想要类似 this 的东西

到目前为止我已经尝试过了

CSS

.menu-item {
  background: #fff;
  width: 50px; 
}
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px; 
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item:focus ul {
  height: 93px;
}
.menu-item h4 a {
  display: block;
  text-decoration: none;
  width: 200px;
  cursor: pointer;
}

HTML

  <div class="menu-item">
  <h4>&#x25BC;</h4>
    <ul>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Log Out</a></li>
    </ul>
  </div>

如果你们能给我任何有助于我制作此菜单的教程的链接，我也将非常高兴。

Answer 1

您可以使用 jQuery 使其变得简单。它是一个 JavaScript 文件，可让您轻松创建此类菜单。其中一个易于使用可以在这里找到:http://patrickkunka.github.io/easydropdown/