创建CSS下拉菜单可以使用HTML和CSS的结合，通常使用HTML中的无序列表（<ul>）和CSS中的伪类（:hover）来实现。以下是一个简单的例子：

HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>下拉菜单</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a>
        <ul>
          <li><a href="#">团队</a></li>
          <li><a href="#">历史</a></li>
        </ul>
      </li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</body>
</html>

CSS样式（styles.css）：
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

nav {
  background-color: #333;
  padding: 15px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover {
  background-color: #ddd;
  color: black;
}

/* 下拉菜单样式 */
li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  background-color: #333;
}

ul ul li {
  float: none;
  border-top: 1px solid #ddd;
}

ul ul a {
  color: white;
  padding: 8px 16px;
}

ul ul a:hover {
  background-color: #555;
  color: yellow;
}

在这个例子中，关于我们菜单项有一个下拉菜单，当鼠标悬停在关于我们菜单项上时，下拉菜单会显示。下拉菜单使用绝对定位，隐藏在默认情况下（display: none），当鼠标悬停时，通过li:hover ul选择器将其显示出来。下拉菜单的样式可以根据需要进行调整。


转载请注明出处：http://www.zyzy.cn/article/detail/12543/CSS