css下拉菜单模板下载

如果您正在创建一个网站并需要一个美观且易于使用的下拉菜单，那么您来对了地方。我们制作了一些精美的CSS下拉菜单模板，您可以免费下载并自由使用。

/* CSS样式 */

/* 下拉菜单按钮 */
.dropdown-btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 下拉菜单内容 */
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

/* 鼠标悬停在下拉菜单按钮上 */
.dropdown-btn:hover {
  background-color: #3e8e41;
}

/* 显示下拉菜单内容 */
.dropdown-btn:hover + .dropdown-content {
  display: block;
}

/* 下拉菜单链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 改变下拉菜单链接颜色时 */
.dropdown-content a:hover {
  background-color: #ddd;
} 

以上代码中定义了下拉菜单按钮和下拉菜单内容的样式。我们还为下拉菜单按钮添加了一个:hover效果，以便鼠标悬停时改变背景颜色。下拉菜单内容使用了position:absolute，保证始终在按钮正下方，并且我们使用:hover + .dropdown-content选择器使内容在鼠标滑过按钮时显示。

您可以根据需要自由修改这些样式，并添加自己的链接和内容。下载模板后，只需将HTML代码复制到您的网站中即可使用。

请记得对下载的模板代码进行适当的备注和修改，以确保它符合您的网站设计和需求。