CSS 下拉菜单 |
您所在的位置:网站首页 › 怎么取消下拉菜单的各种通知功能 › CSS 下拉菜单 |
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 基础教程
CSS 教程
CSS 简介
CSS 语法
CSS 选择器
CSS 使用
CSS 注释
CSS 颜色
CSS RGB 颜色
CSS HEX 颜色
CSS HSL 颜色
CSS 背景
CSS 背景图像
CSS 背景重复
CSS 背景附着
CSS 简写背景属性
CSS 边框
CSS 边框宽度
CSS 边框颜色
CSS 边框各边
CSS 简写边框属性
CSS 圆角边框
CSS 外边距
CSS 外边距合并
CSS 内边距
CSS 高度/宽度
CSS 框模型
CSS 轮廓
CSS 轮廓宽度
CSS 轮廓颜色
CSS 简写轮廓属性
CSS 轮廓偏移
CSS 文本
CSS 文本对齐
CSS 文本装饰
CSS 文本转换
CSS 文字间距
CSS 文本阴影
CSS 字体
CSS 字体样式
CSS 字体大小
CSS 谷歌字体
CSS 简写字体属性
CSS 图标
CSS 链接
CSS 列表
CSS 表格
CSS 中级教程
CSS Display
CSS max-width
CSS 定位
CSS 溢出
CSS 浮动
CSS 清除浮动
CSS 布局 - 浮动实例
CSS inline-block
CSS 对齐
CSS 组合器
CSS 伪类
CSS 伪元素
CSS 不透明度
CSS 导航栏
CSS 垂直导航栏
CSS 水平导航栏
CSS 下拉菜单
CSS 图片库
CSS 图像精灵
CSS 属性选择器
CSS 表单
CSS 计数器
CSS 网站布局
CSS 单位
CSS 特异性
CSS3 高级教程
CSS 圆角
CSS 边框图像
CSS 背景
CSS 颜色
CSS 渐变
CSS 径向渐变
CSS 阴影
CSS box-shadow
CSS 文本效果
CSS 网络字体
CSS 2D 转换
CSS 3D 转换
CSS 过渡
CSS 动画
CSS 工具提示
CSS 图像样式
CSS object-fit
CSS 按钮
CSS 分页
CSS 多列
CSS 用户界面
CSS 变量
CSS 覆盖变量
CSS 变量 - JavaScript
CSS 变量 - 媒体查询
CSS Box Sizing
CSS Flexbox
CSS 媒体查询
CSS 媒体查询实例
CSS 响应式设计
RWD 简介
RWD 视口
RWD 网格视图
RWD 媒体查询
RWD 图像
RWD 视频
CSS 网格教程
CSS 网格布局模块
CSS 网格容器
CSS 网格项目
CSS 实例
CSS 实例
CSS 测验
CSS 测验
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 单位
CSS 听觉
CSS 网络安全字体
CSS 可动画制作
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
建站手册
网站构建
万维网联盟 (W3C)
浏览器信息
网站品质
语义网
职业规划
网站主机
关于 W3School
帮助 W3School
CSS 下拉菜单
CSS 水平导航栏
CSS 图片库
使用 CSS 创建可悬停的下拉列表。 演示:下拉式案例 实例请把鼠标指针移动到下面的例子上: 下拉文本Hello World! Link 1 Link 2 Link 3 图片: Coffee 基础的下拉菜单创建当用户将鼠标移到元素上时出现的下拉框。 实例 .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; 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; } Mouse over meHello World! 亲自试一试 例子解释: HTML使用任何元素打开下拉菜单内容,例如 或 元素。 使用容器元素(如 )创建下拉内容,并在其中添加任何内容。 用 元素包围这些元素,使用 CSS 正确定位下拉内容。 CSS.dropdown 类使用 position:relative,当我们希望将下拉内容放置在下拉按钮的正下方(使用 position:absolute)时,需要使用该类。 .dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的,并将在悬停时显示(请看下文)。请注意,min-width 设置为 160px。可随时更改此设置。提示:如果您希望下拉内容的宽度与下拉按钮的宽度一样,请将宽度设置为 100%(设置 overflow:auto 可实现在小屏幕上滚动)。 我们用了 CSS box-shadow 属性,而不是边框,这样下拉菜单看起来像一张“卡片”。 当用户将鼠标移到下拉按钮上时,:hover 选择器用于显示下拉菜单。 下拉式菜单创建一个下拉菜单,并允许用户从列表中选择一个选项: Link 1 Link 2 Link 3本例与上例相似,除了我们在下拉框内添加链接并为其设置了样式,以此匹配下拉按钮的样式: 实例 /* 设置下拉按钮的样式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* 容器 - 需要放置下拉内容 */ .dropdown { position: relative; display: inline-block; } /* 下拉内容(默认隐藏) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* 下拉链接 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 悬停时更改下拉链接的颜色 */ .dropdown-content a:hover {background-color: #f1f1f1} /* 悬停时显示下拉菜单 */ .dropdown:hover .dropdown-content { display: block; } /* 显示下拉内容时,更改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { background-color: #3e8e41; } Dropdown Link 1 Link 2 Link 3亲自试一试 右对齐的下拉菜单内容 Link 1 Link 2 Link 3 Link 1 Link 2 Link 3如果希望下拉菜单从右到左而不是从左到右,请添加 right: 0;: 实例 .dropdown-content { right: 0; }亲自试一试 更多实例 1 - 下拉式图像如何在下拉框中添加图像和其他内容。 请把鼠标指针悬停在图像上: Coffee亲自试一试 2 - 下拉式导航如何在导航栏中添加下拉菜单。 亲自试一试 CSS 水平导航栏 CSS 图片库 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。 使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |