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/

制作下拉菜单

1 个答案: