【CSS 14】dropdowns 下拉菜单下拉式图像下拉式导航

2023-07-09 18:46| 来源: 网络整理| 查看: 265

CSS dropdowns 下拉菜单

dropdowns 下拉菜单

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

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

DOCTYPE html> .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; } /* z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住 z-index属性的值分为三种 1. auto(默认值)：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0 2. number：整数数值，在兼容所有浏览器的情况下取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高，数值越小，层级越低 3. inherit：继承父元素的z-index的属性值 */ .dropdown:hover .dropdown-content { display: block; } 可悬停的下拉菜单将鼠标移到文本上即可查看下拉内容请将鼠标移到我的上面 Hello World! 更多说明 HTML 使用任何元素打开下拉菜单内容，例如或元素使用容器元素（如）创建下拉内容，并在其中添加任何内容使用元素包围这些元素，使用 CSS 正确定位下拉内容 CSS .dropdown 类使用 position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类 .dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示注意，min-width 设置为 160px，可随时更改此设置如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％设置 overflow:auto 可实现在小屏幕上滚动使用 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片” 当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单

下拉式菜单创建一个下拉菜单，并允许用户从列表中选择一个选项本例与上例相似，除了我们在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式

DOCTYPE html> .dropbtn { background-color: #4CAF50; /*green更深，而#4CAF50浅亮*/ color: white; padding: 12px; /*填充内边距，让按钮更大同时与文本更协调*/ 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: #3e8341; } 下拉菜单请把鼠标移到按钮上以打开下拉菜单 Dropdown Link 1 Link 2 Link 3 NOTE:测试链接 href="#"，真实的网站会用 URL

右对齐的下拉菜单内容如果希望下拉菜单从右到左而不是从左到右，请添加 right: 0;

.dropdown-content { right: 0; }

下拉式图像如何在下拉框中添加图像和其他内容请把鼠标指针悬停在图像上

DOCTYPE html> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px regba(0,0,0,0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .desc { padding: 15px; text-align: center; } 下拉图片查看图片

【本文地址】

公司简介

联系我们

【CSS 14】dropdowns 下拉菜单 下拉式图像 下拉式导航

【CSS 14】dropdowns 下拉菜单下拉式图像下拉式导航