CSS 下拉菜单

最新推荐文章于 2022-07-08 16:55:08 发布

微笑向日葵°

最新推荐文章于 2022-07-08 16:55:08 发布

阅读量904

点赞数

分类专栏： CSS html 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43535265/article/details/114654272

版权

使用 CSS 创建可悬停的下拉列表。

1. 基础的下拉菜单

创建当用户将鼠标移到元素上时出现的下拉框。

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
    
  position: relative;
  display: inline-block;
}

.dropdown-content {
    
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/* 为下拉内容框添加阴影 */
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
    
  display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <span>把鼠标移到我上面</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

</body>

最低0.47元/天解锁文章

微笑向日葵°

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS 下拉菜单

使用 CSS 创建可悬停的下拉列表。1. 基础的下拉菜单创建当用户将鼠标移到元素上时出现的下拉框。代码如下：<!DOCTYPE html><html><head><style>.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-co
复制链接

扫一扫