css - 下拉菜单

来源：互联网发布：mac 你的安全设置编辑：程序博客网时间：2024/05/16 07:25

http://www.runoob.com/css/css-dropdowns.html

一、基本下拉菜单

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

<!DOCTYPE html><html><head>  <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 部分：
- 我们可以使用任何的 HTM，元素来打开下拉菜单，如：<span>, 或 a <button> 元素。
- 使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
- 使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：
- .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
- .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。注意: 如果你想设置下拉内容与下拉按钮的宽带一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
- 我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。
- :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

二、可选择的下拉菜单

下拉菜单
创建下拉菜单，并允许用户选取列表中的某一项：
这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：

<style>/* 下拉按钮样式 */.dropbtn {    background-color: #4CAF50;    color: white;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;}/* 容器 <div> - 需要定位下拉内容 */.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><div class="dropdown">  <button class="dropbtn">下拉菜单</button>  <div class="dropdown-content">    <a href="#">菜鸟教程 1</a>    <a href="#">菜鸟教程 2</a>    <a href="#">菜鸟教程 3</a>  </div></div>

三、导航条下拉

<!DOCTYPE html><html><head><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></html>

0 0