Question

我是网络编程的新手。我想在html中创建按钮，当您将鼠标悬停在它上面时，它会显示您想要去的页面的下拉选项。

感谢任何帮助。谢谢！

Answer 1

这是你想要实现的一个非常基本的例子。它实际上不是一个按钮，而是一个样式列表。由于您不熟悉HTML，我会发布整个代码，以便您可以复制并粘贴它：

#button {
  /* Box in the button */
  display: block;
  width: 190px;
}

#button a {
  text-decoration: none;
  /* Remove the underline from the links. */
}

#button ul {
  list-style-type: none;
  /* Remove the bullets from the list */
}

#button .top {
  background-color: #DDD;
  /* The button background */
}

#button ul li.item {
  display: none;
  /* By default, do not display the items (which contains the links) */
}

#button ul:hover .item {
  /* When the user hovers over the button (or any of the links) */
  display: block;
  border: 1px solid black;
  background-color: #EDC;
}

<body>
  <div id="button">
    <ul>
      <li class="top">OtherOverflow Sites</li>
      <li class="item"><a href="http://serverfault.com/">Visit serverfault</a></li>
      <li class="item"><a href="http://superuser.com/">Visit superuser</a></li>
      <li class="item"><a href="http://doctype.com/">Visit doctype</a></li>
    </ul>
  </div>
</body>

Answer 2

听起来你正在寻找一些简单的基于CSS的下拉菜单 - 我推荐所谓的“Suckerfish”风格下拉列表。此链接使用多个项目作为水平菜单，但可以轻松地适应一个链接。

http://htmldog.com/articles/suckerfish/dropdowns/

在html中创建按钮下拉？

2 个答案: