您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

CSS 下拉菜单

胜于蓝2013-12-31【CSS3|Html5】人已围观

简介使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。下拉菜单实例实例演示 1文本下拉菜单 实例演示 2下拉菜单 实例演示 3 基本下拉菜单当鼠标移动到指定元素上时,会出现

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。PLf胜于蓝|优秀个人博客


下拉菜单实例

实例演示 1

文本下拉菜单

 PLf胜于蓝|优秀个人博客

 PLf胜于蓝|优秀个人博客

实例演示 2

 PLf胜于蓝|优秀个人博客

 PLf胜于蓝|优秀个人博客

实例演示 3

Trolltunga Norway

 PLf胜于蓝|优秀个人博客


基本下拉菜单

当鼠标移动到指定元素上时,会出现下拉菜单。PLf胜于蓝|优秀个人博客

实例

<style>PLf胜于蓝|优秀个人博客
.dropdown {PLf胜于蓝|优秀个人博客
    position: relative;PLf胜于蓝|优秀个人博客
    display: inline-block;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
.dropdown-content {PLf胜于蓝|优秀个人博客
    display: none;PLf胜于蓝|优秀个人博客
    position: absolute;PLf胜于蓝|优秀个人博客
    background-color: #f9f9f9;PLf胜于蓝|优秀个人博客
    min-width: 160px;PLf胜于蓝|优秀个人博客
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);PLf胜于蓝|优秀个人博客
    padding: 12px 16px;PLf胜于蓝|优秀个人博客
    z-index: 1;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
.dropdown:hover .dropdown-content {PLf胜于蓝|优秀个人博客
    display: block;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
</style>PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
<div class="dropdown">PLf胜于蓝|优秀个人博客
  <span>Mouse over me</span>PLf胜于蓝|优秀个人博客
  <div class="dropdown-content">PLf胜于蓝|优秀个人博客
    <p>Hello World!</p>PLf胜于蓝|优秀个人博客
  </div>PLf胜于蓝|优秀个人博客
</div>PLf胜于蓝|优秀个人博客
尝试一下 »

实例解析

HTML 部分:PLf胜于蓝|优秀个人博客

我们可以使用任何的 HTML 元素来打开下拉菜单,如:<span>, 或 a <button> 元素。PLf胜于蓝|优秀个人博客

使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。PLf胜于蓝|优秀个人博客

使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。PLf胜于蓝|优秀个人博客

CSS 部分:PLf胜于蓝|优秀个人博客

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。PLf胜于蓝|优秀个人博客

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

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。PLf胜于蓝|优秀个人博客

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。PLf胜于蓝|优秀个人博客


下拉菜单

创建下拉菜单,并允许用户选取列表中的某一项:PLf胜于蓝|优秀个人博客

这个实例类似前面的实例,当我们在下拉列表中添加了链接,并设置了样式:PLf胜于蓝|优秀个人博客

实例

<style>PLf胜于蓝|优秀个人博客
/* 下拉按钮样式 */PLf胜于蓝|优秀个人博客
.dropbtn {PLf胜于蓝|优秀个人博客
    background-color: #4CAF50;PLf胜于蓝|优秀个人博客
    color: white;PLf胜于蓝|优秀个人博客
    padding: 16px;PLf胜于蓝|优秀个人博客
    font-size: 16px;PLf胜于蓝|优秀个人博客
    border: none;PLf胜于蓝|优秀个人博客
    cursor: pointer;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
/* 容器 <div> - 需要定位下拉内容 */PLf胜于蓝|优秀个人博客
.dropdown {PLf胜于蓝|优秀个人博客
    position: relative;PLf胜于蓝|优秀个人博客
    display: inline-block;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
/* 下拉内容 (默认隐藏) */PLf胜于蓝|优秀个人博客
.dropdown-content {PLf胜于蓝|优秀个人博客
    display: none;PLf胜于蓝|优秀个人博客
    position: absolute;PLf胜于蓝|优秀个人博客
    background-color: #f9f9f9;PLf胜于蓝|优秀个人博客
    min-width: 160px;PLf胜于蓝|优秀个人博客
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
/* 下拉菜单的链接 */PLf胜于蓝|优秀个人博客
.dropdown-content a {PLf胜于蓝|优秀个人博客
    color: black;PLf胜于蓝|优秀个人博客
    padding: 12px 16px;PLf胜于蓝|优秀个人博客
    text-decoration: none;PLf胜于蓝|优秀个人博客
    display: block;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
/* 鼠标移上去后修改下拉菜单链接颜色 */PLf胜于蓝|优秀个人博客
.dropdown-content a:hover {background-color: #f1f1f1}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
/* 在鼠标移上去后显示下拉菜单 */PLf胜于蓝|优秀个人博客
.dropdown:hover .dropdown-content {PLf胜于蓝|优秀个人博客
    display: block;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
/* 当下拉内容显示后修改下拉按钮的背景颜色 */PLf胜于蓝|优秀个人博客
.dropdown:hover .dropbtn {PLf胜于蓝|优秀个人博客
    background-color: #3e8e41;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
</style>PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
<div class="dropdown">PLf胜于蓝|优秀个人博客
  <button class="dropbtn">下拉菜单</button>PLf胜于蓝|优秀个人博客
  <div class="dropdown-content">PLf胜于蓝|优秀个人博客
    <a href="#">菜鸟教程 1</a>PLf胜于蓝|优秀个人博客
    <a href="#">菜鸟教程 2</a>PLf胜于蓝|优秀个人博客
    <a href="#">菜鸟教程 3</a>PLf胜于蓝|优秀个人博客
  </div>PLf胜于蓝|优秀个人博客
</div>PLf胜于蓝|优秀个人博客
尝试一下 »

下拉内容对齐方式

float:left;

 PLf胜于蓝|优秀个人博客

 PLf胜于蓝|优秀个人博客

float:right;

 PLf胜于蓝|优秀个人博客

如果你想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加以下代码 right: 0;PLf胜于蓝|优秀个人博客

实例

.dropdown-content {PLf胜于蓝|优秀个人博客
    right: 0;PLf胜于蓝|优秀个人博客
}PLf胜于蓝|优秀个人博客
PLf胜于蓝|优秀个人博客
尝试一下 »

 

Tags:

很赞哦! ()

上一篇:CSS 伪元素

下一篇:CSS 网页布局

文章评论

当前时间

快速排名

  • 网站建设|万词霸屏,企业软文推广,刷下拉框
  • 快速排名:不用再等SEO三个月,只需3-7天即可把行业关键词覆盖百度搜索引擎首页,点击不收费,排名报表,真实访问量报表一目了然。

合作加盟

  • 扫码请注明来意,否则不会通过
  • 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
  • 扫码成为快钱代理
  • 扫码加站长微信,为您推荐快钱总部负责人
  • 快钱POSS机(电签版)
  • 1,免押版:签约费率快捷交易0.38%,常规交易0.65%
  • 贷记卡单笔≥3000元视为激活
  • 2,,有押版:签约快捷交易0.38%,常规交易0.65%
  • 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
  • 电签版ipos参与每月扶持奖励
  • 电签版ipos与Mpos单独考核台均
  • 30台以上有效激活奖励3000元扶持金
  • 当月交易额≥3000元的为活跃用户

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计7613篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 扫描二维码:请注明来意,否则不会通过
  • 微信号:扫描二维码,关注我们
歌名 - 歌手
0:00