在本文中，我们将为您详细介绍CSS下拉菜单的相关知识，并且为您解答关于css下拉菜单快速选择的疑问，此外，我们还会提供一些关于BootstrapCSS——下拉菜单、Bootstrap下拉菜单、Boot
在本文中，我们将为您详细介绍CSS 下拉菜单的相关知识，并且为您解答关于css 下拉菜单快速选择的疑问，此外，我们还会提供一些关于Bootstrap CSS——下拉菜单、Bootstrap 下拉菜单、Bootstrap 下拉菜单（Dropdowns）简介、bootstrap3 - 下拉菜单的有用信息。
本文目录一览：
CSS 下拉菜单（css 下拉菜单快速选择）
使用
1、下拉菜单的实现
当鼠标移入指定元素时，显示下拉菜单。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的下拉菜单</title>
<style>
.dropdown{
position:relative;
display:inline-block;
}
.dropdown-content{
min-width:200px;
border:1px solid black;
position:absolute;
display:none;
}
.dropdown:hover .dropdown-content{
display:block;
}
</style>
</head>
<body>
<p>
<span>鼠标你过来，我为你展示下拉菜单。</span>
<p>
<p>下拉菜单 1</p>
<p>下拉菜单 2</p>
</p>
</p>
</body>
</html>实例解析：
立即学习“前端免费学习笔记（深入）”；
HTML 部分：
可以使用任何 HTML 元素来打开下拉菜单，比如 ，或 、
Bootstrap CSS——下拉菜单
总结
以上是小编为你收集整理的Bootstrap CSS——下拉菜单全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
Bootstrap 下拉菜单
一.一个简单的下拉菜单
1.创建一个<div>的容器 //包裹素也可不为div 但一定要有class .dropDown
2.在容器内添加 <button type="button"data-toggle="dropdown">
3.在button中加入主名称 和<span></span> <!---下拉三角-->
4.在无序列表容器中加入 .dropdown-menu
注：通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div>
<button type="button"data-toggle="dropdown">
主题<span></span> <!---下拉三角-->
</button>
<ul>
<li><a tabindex="-1" href="#">第一个</a></li>
<li><a tabindex="-1" href="#">第二个</a></li>
<li>分割线</li>
</ul>
</div>
</body>
</html>
二. 按钮下拉菜单
外侧div 的class为 .btn-group 不为dropdown
<div>
<button type="button"data-toggle="dropdown">
<span></span> 按钮下拉菜单
</button>
<ul>
<li><a href="#">按钮下拉菜单一</a></li>
<li><a href="#">按钮下拉菜单二</a></li>
</ul>
</div>
三.导航栏中的下拉菜饭
在<li>中插入下拉菜单,将<li>作为下拉菜单最外侧容器 加class .dropdown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<nav>
<div>
<div>
<a>导航</a> <!--导航标题-->
</div>
<div>
<ul>
<li><a href="#">笑一下</a></li>
<li ><a href="#">乐一下</a></li>
<li> <!--下拉菜单部分-->
<a href="#"data-toggle="dropdown">
其他表情 <span></span>
</a>
<ul>
<li><a href="#">big</a></li>
<li><a href="#">small</a></li>
<li><a href="#">分离</a></li>
<li></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单
data-toggle="dropdown" 去掉这个就失去的下拉功能
<nav> 最外侧包裹<nav>标签
标准导航条样式 navbar navbar-default，
向 <div> 元素添加一个标题 class .navbar-header， 内部包含 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
Bootstrap 下拉菜单（Dropdowns）简介
| Bootstrap 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 |
如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：
实例
<div> <button type="button"id="dropdownMenu1" data-toggle="dropdown"> 主题 <span></span> </button> <ulrole="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 数据挖掘 </a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 数据通信 / 网络 </a> </li> <li role="presentation"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 分离的链接 </a> </li> </ul> </div>
尝试一下 »
结果如下所示：
选项
对齐
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：
实例
<div> <button type="button"id="dropdownMenu1" data-toggle="dropdown"> 主题 <span></span> </button> <ulrole="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 数据挖掘 </a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 数据通信 / 网络 </a> </li> <li role="presentation"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 分离的链接 </a> </li> </ul> </div>
尝试一下 »
结果如下所示：
标题
您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点：
<div> <button type="button"id="dropdownMenu1" data-toggle="dropdown"> 主题 <span></span> </button> <ulrole="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> 下拉菜单标题 </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 数据挖掘 </a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 数据通信 / 网络 </a> </li> <li role="presentation"></li> <li role="presentation"> 下拉菜单标题 </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 分离的链接 </a> </li> </ul> </div>
尝试一下 »
结果如下所示：
更多实例
| 类 | 描述 | 实例 |
|---|---|---|
| .dropdown | 指定下拉菜单，下拉菜单都包裹在 .dropdown 里 | 尝试一下 |
| .dropdown-menu | 创建下拉菜单 | 尝试一下 |
| .dropdown-menu-right | 下拉菜单右对齐 | 尝试一下 |
| .dropdown-header | 下拉菜单中添加标题 | 尝试一下 |
| .dropup | 指定向上弹出的下拉菜单 | 尝试一下 |
| .disabled | 下拉菜单中的禁用项 | 尝试一下 |
| .divider | 下拉菜单中的分割线 | 尝试一下 |
bootstrap3 - 下拉菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div >
<button type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单<span ></span>
</button>
<ul >
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li ></li>
<li><a href="#">选项4</a></li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
<button type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单<span></span>
</button>
<ul>
<li >第一部分菜单头</li>
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li ></li>
<li >第二部分菜单头部</li>
<li><a href="#">选项4</a></li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
关于CSS 下拉菜单和css 下拉菜单快速选择的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于Bootstrap CSS——下拉菜单、Bootstrap 下拉菜单、Bootstrap 下拉菜单（Dropdowns）简介、bootstrap3 - 下拉菜单的相关知识，请在本站寻找。
本文标签：
