html下拉菜单右侧显示,css如何设置下拉菜单？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

使用css设置下拉菜单：

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

实例

.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 me

Hello World!

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。

使用容器元素 (如：

) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用

元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown类使用position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉内容对齐方式

float:left;

左

float:right;

右

如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;

提示信息

实例解析

HTML) 使用容器元素 (like

) 并添加 "tooltip" 类。在鼠标移动到

上时显示提示信息。

提示文本放在内联函数上(如 ) 并使用class="tooltiptext"。

CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。

定位提示工具

提示工具显示在指定元素的右侧(left:105%) 。

注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距(padding)是 5px。

如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。

在提示框显示在左边的情况也是这个原理。

显示在右侧：.tooltip .tooltiptext {

top: -5px;

left: 105%;

}

显示在左侧：.tooltip .tooltiptext {

top: -5px;

right: 105%;

}

显示在头部：.tooltip .tooltiptext {

width: 120px;

bottom: 100%;

left: 50%;

margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */}

显示在底部：.tooltip .tooltiptext {

width: 120px;

top: 100%;

left: 50%;

margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */}

添加箭头

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

1.顶部提示框/底部箭头：.tooltip .tooltiptext::after {

content: " ";

position: absolute;

top: 100%; /* 提示工具底部 */

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: black transparent transparent transparent;

}

在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。

注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示。

border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

html下拉菜单右侧显示,css如何设置下拉菜单？相关推荐

关于duilib CComboUI控件下拉框字体显示与xml 设置不相符的问题
duilib的下拉列表框的字体无法通过itemfont自定义关于duilib CComboUI控件下拉框字体显示与xml 设置不相符的问题解决办法: 添加链接描述在设置全局字体属性时,设置字 ...
windows下cmd命令行显示UTF8字符设置(CHCP命令)
点我进入原文 windows下cmd命令行显示UTF8字符设置(CHCP命令) 在中文Windows系统中,如果一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗口(所谓的DOS窗口)中不能 ...
css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
html css 边框不显示,css怎么设置不显示下边框？
css边框样式属性是border,使用border即可让div或span或h1.p等对象实现需要的边框样式.下面我们来看一下css设置不显示下边框的方法. css可以使用border属性设置边框样式, ...
css 下边框 90%,css怎么设置下边框
css设置下边框的方法:首先新建一个html文件:然后使用div标签创建一个模块:接着给div标签添加一个id属性:最后使用border-bottom属性设置div的下边框即可. 本文操作环境:win ...
android 下拉刷新实现方式,Android RecyclerView设置下拉刷新的实现方法
Android RecyclerView设置下拉刷新的实现方法 1 集成 SwipeRefreshLayout 1.1 xml布局文件中使用 android:id="@+id/refresh ...
ant vue 树形菜单横向显示_ant design vue menu 导航菜单
ant design vue menu 导航菜单 ant design vue menu 导航菜单是一个网站或者系统的重要功能,通过导航可以对网站或者系统的功能进行分门别类. 水平导航菜单例子首页 ...
html 文字横线自动长度,css怎么设置下划线的长度？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 自定义下划线.使 ...
html中加长下滑线,css怎么设置下划线的长度？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 自定义下划线.使 ...
html下拉菜单触摸显示,CSS导航：纯CSS触碰式下拉菜单
[破洛洛教学网] 纯CSS触碰式下拉菜单 /* 整体设置*/ .navigation { margin:0; padding:0; width:610px; list-style-type:none; ...

html下拉菜单右侧显示,css如何设置下拉菜单？

html下拉菜单右侧显示,css如何设置下拉菜单？相关推荐

最新文章

热门文章