Question

我用CSS创建了一个非常简单的HTML菜单栏。 WEBSITE 当我将鼠标悬停在服务链接中时，我想要一个下拉选项。我希望在那里显示这些选项：OptionA，OptionB，OptionC（仅样本）。

更多力量，非常感谢你。

我的索引代码和css代码如下：

#menu {
  width: 550px;
  height: auto;
  padding: 8px 0px;
  margin: 0px;
  font-size: 16px;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  text-align: center;
  text-shadow: 3px 2px 3px #333333;
  background-color: #8AD9FF;
  border-radius: 8px;
}
#menu li {
  display: inline;
  padding: 20px;
}
#menu a {
  text-decoration: none;
  color: #00F;
  padding: 8px 8px 8px 8px;
}
#menu a:hover {
  color: #F90;
  background-color: #FFF;
}

<html>

<head>
  <title>MY WEBSITE</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<div align="center">

  <body>

    <div id="menu">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About Us</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
  </body>

</html>

Answer 1

W3Schools如何使其成功example。您也可以尝试一些像Bootstrap这样的框架。

Answer 2

你需要给你的服务一类“dropbtn”。然后用一个“dropdown-content”类创建另一个div，并在anchor元素中给出三个选项。

查看此资源http://www.w3schools.com/css/css_dropdowns.asp并查看最后一个示例

HTML和CSS下拉选项

2 个答案: