CSS 下拉菜单

最新推荐文章于 2022-04-12 20:50:49 发布
最新推荐文章于 2022-04-12 20:50:49 发布
阅读量215 收藏 1
点赞数
分类专栏： CSS
原文链接：https://www.runoob.com/css/css-dropdowns.html
版权

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

下拉菜单实例

在这里插入图片描述

基本下拉菜单

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

<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.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;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>

在这里插入图片描述
实例解析

HTML 部分：

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

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

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

CSS 部分：

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

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

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

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

下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项：

在这里插入图片描述
这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：

<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.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);
}

.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;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="//www.runoob.com">菜鸟教程 1</a>
    <a href="//www.runoob.com">菜鸟教程 2</a>
    <a href="//www.runoob.com">菜鸟教程 3</a>
  </div>
</div>

</body>

在这里插入图片描述

下拉内容对齐方式

float:left;
在这里插入图片描述
float:right;
在这里插入图片描述
如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;

<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.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;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.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;
}
</style>
</head>
<body>

<h2>下拉内容的对齐方式</h2>
<p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">左</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">菜鸟教程 1</a>
    <a href="#">菜鸟教程 2</a>
    <a href="#">菜鸟教程 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">右</button>
  <div class="dropdown-content">
    <a href="#">菜鸟教程 1</a>
    <a href="#">菜鸟教程 2</a>
    <a href="#">菜鸟教程 3</a>
  </div>
</div>

</body>

在这里插入图片描述

更多实例

图片下拉

该实例演示了如何如何在下拉菜单中添加图片。

<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.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);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<h2>下拉图片</h2>
<p>移动鼠标到图片上显示下拉内容。</p>

<div class="dropdown">
  <img src="//www.runoob.com/wp-content/uploads/2015/09/banner.jpg" alt="Trolltunga Norway" width="100" height="50">
  <div class="dropdown-content">
    <img src="//www.runoob.com/wp-content/uploads/2015/09/banner.jpg" alt="Trolltunga Norway" width="400" height="200">
    <div class="desc">学的不仅是技术，更是梦想！</div>
  </div>
</div>

</body>

在这里插入图片描述

导航条下拉

该实例演示了如何在导航条上添加下拉菜单。

<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover, .dropbtn {
    background-color: #111;
}

.dropdown {
    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);
}

.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;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>

在这里插入图片描述

笔记

文末的“下拉内容对齐方式”实例中，尝试把.dropdown-content里的 right:0; 改成了 left:0; ，接着模仿实例给右边的按钮加上了内联样式" style=“right:0;” " 按理应该能够像实例一样由内联样式(inline style)覆盖内部样式(internal style sheet)，实现同样的效果。

但是实际上由于"left"的优先度高于"right"，右边按钮的样式并没有改变。

最后通过重置left属性实现了想要的结果:

<div class="dropdown-content" "style="left:unset; right:0;">

把.dropdown-content 里的 right:0; 改成了 left:0; ，接着模仿实例给右边的按钮加上了内联样式" style=“right:0;”。 有的朋友就会疑惑，right:0;在内联样式中，而 left:0;在嵌入样式中，内联样式的优先级是高于嵌入样式的。但为什么起作用的是 left ？

一般left和right在一个样式中只能使用一次，同时使用会出现兼容问题，当浏览器解释代码的时候发现left和right同时存在时，就会放弃解释right。放弃解释后优先级就排不上用场了，即使优先级最高的！important也不会作用。这就好比战场上有两个士兵A和B，B被打死了，那么即使医疗兵医术再高也救不了他了。

所以left优先级高于right

star walkin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
12-13
本文将要向大家分享8款精美的CSS3表单设计，内容包括登录表单、下拉选择、按钮等，每一个表单都有演示和源码下载，如果你喜欢，就赶紧收藏他们吧。 1、简易的CSS3登录表单 在线演示 -源码下载 2、CSS3切换式按钮开关 在线演示 -源码下载 3、仿Facebook的登录表单 在线演示 -源码下载 4、自定义美化select下拉框 在线演示 -源码下载 5、CSS3联系表单 在线演示 -源码下载 6、黑色个性化CSS3登录表单 在线演示 -源码下载 7、HTML5 & CSS3 信封形式的联系人表单 在线演示 8、整洁的HTML5联系人表单 在线演示 -源码下载
CSS复习中级部分（三）对齐 导航栏 下拉菜单
Silent_crab的博客
10-03 303
中级教程（三）分为三个部分 对齐、导航栏、下拉菜单 其实基本都是学习过的内容，实际上是对各个学习过的知识点的综合应用。 包括普通的形状、颜色样式，以及点击效果，悬停效果用到的伪类 位置用到了float position等，同样是面试中常考的点 ...
背景透明度 下拉菜单
weixin_30408309的博客
05-21 389
下拉菜单 ——————> <style> /* 下拉按钮样式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; curs...
css实现下拉菜单
ybh756784818的博客
04-12 9139
css实现下拉菜单的具体步骤，前端小白的个人理解
CSS下拉菜单
02-21
在网页设计中，CSS下拉菜单是一种常见的交互元素，它允许用户通过点击主菜单项来展开子菜单，显示更多的选项。这种设计模式提高了网站的导航效率，尤其在菜单选项较多时更为适用。本文将深入探讨如何使用CSS创建下拉...
CSS下拉菜单.rar
07-04
而CSS下拉菜单则是导航菜单中的一个高级应用，为用户提供更便捷的交互体验。本资源"CSS下拉菜单.rar"显然是关于如何使用CSS来创建动态、响应式的下拉菜单。 在创建CSS下拉菜单时，我们通常会结合HTML和CSS技术，...
CSS下拉菜单简单制作教程
01-21
本文实例为大家分享了CSS下拉菜单的具体实现代码，供大家参考，具体内容如下 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html>  <head>  <title>下拉菜单实例|软件开发网(mscto...
你值得拥有的CSS下拉菜单效果
09-24
在网页设计中，CSS下拉菜单是一个常见的交互元素，它为用户提供了一种便捷的方式来访问页面的多层次导航。本文将深入探讨如何使用CSS实现各种下拉菜单效果，以及如何通过优化来提升用户体验。 首先，让我们来看一个...
纯CSS下拉菜单，宽度自适应
02-08
这是一个纯CSS的下拉菜单，提供给CSS爱好者学习，应用不是非常广泛，如果作为导航栏请固定高度，否则会将页面玩挤下。
css实现一个元素高度固定宽度按比例显示效果
12-14
用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？ 解决后效果如图： 红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果； css代码： .content { margin: 0 auto; height: 79vh; .video_box { position: relative; height: 100%; overflow: hidden; margin: 0 auto;
标题长度溢出时，自动显示为省略“…”的Css text-overflow
12-13
复制代码代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”><HTML><HEAD><TITLE> New Document </TITLE><style tyep=”text/css”>.my_css { overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; width:120px; height:20px; font-size:12px;}</style></HEAD><B
Bootstrap CSS组件之按钮下拉菜单
08-31
主要为大家详细介绍了Bootstrap CSS组件之按钮下拉菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
div+css实现自适应宽度按钮
10-30
div+css实现自适应宽度按钮
CSS 如何制作下拉菜单
CyberPlayer的博客
02-23 3567
下拉菜单 .dropdown类使用position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用position:absolute）时，需要使用该类。 .dropdown-content类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置overflow:auto可实现在小屏幕上滚动...
判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号
11-30
在进行H5页面开发时，项目都要提测了，产品却加了个点击展开和点击收起的需求。。 上知乎看了下 ，也有人有这样的疑问，今天我就把问题给解决啦~ 这里就来讲述下我的解决方案： 利用多行溢出实现“展开”“收起” 多行溢出省略Css： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 设计是这样的。。 点击展开.png 点击收起.png 接下来我来讲讲我的实现 <div class="rev
网页下拉菜单之CSS实现
热门推荐
Scarborough_Coral的博客
03-04 1万+
网页下拉菜单的实现 一、什么是网页下拉菜单？                      网页下拉菜单就是多级菜单，最为简单的就是二级菜单，如下图所示：                 二、网页下拉菜单有那种实现方式？                       下拉菜单可以用CSS实现，也可以用JavaScript实现，还可以用JQuery实现。今天我们就来说一下简单用CSS实现下拉菜
css下拉菜单字体大小问题
最新发布
05-29
要设置下拉菜单的字体大小，可以使用CSS中的`font-size`属性，例如： ```css .dropdown-menu { font-size: 14px; } ``` 其中，`.dropdown-menu`是下拉菜单的类名，`14px`是字体大小。你可以根据需要自行调整字体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值