您的位置：首页 > Web前端 > BootStrap

bootstrap 水平导航鼠标移动下拉，点击下拉。

2016-03-12 10:06 330 查看

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>球球</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style TYPE="text/css">
/*导航*/
.nav-tabs > li > a:hover {
/*border-color: #eee #eee #ddd;*/
border: 0px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: white;
cursor: default;
background-color: #000609;
border: 0px ;
border-bottom-color: transparent;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: red;
}
/*导航*/

/*鼠标悬停*/
.dropbtn {
position: relative;
display: block;
padding: 10px 15px;
/* width: 80px;*/
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: red;
min-width: 80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 10px 15px;
text-decoration: none;
display: block;
background-color: aqua;
}

.dropdown-content a:hover {background-color: #f1f1f1}

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

.dropdown:hover .dropbtn {
background-color: red;
}
/*鼠标悬停*/

/*下拉菜单*/
.dropdown-menu li a{
min-width: 80px;
/*  padding:0px;*/
}
.cc:hover,
.cc:focus,
.cc.focus {
color: red;
}

.dropdown-menu {
min-width: 160px;
}
/*下拉菜单*/

</style>
</head>
<body>

<div class="container">

<div class="row" style="background-color: #000609;color: white">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation">
<div class="dropdown">
<a class="dropbtn">下拉菜单</a>
<div class="dropdown-content" style="z-index: 99;">
<a href="http://www.runoob.com">菜鸟教程</a>
<a href="http://www.runoob.com">菜鸟教程</a>
<a href="http://www.runoob.com">菜鸟教程</a>
</div>
</div>

</li>
<li role="presentation">

<div class="btn-group">
<button type="button" class="btn cc dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  style="padding: 10px 15px;background-color: #000609;border: 0px;">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" style="background-color: red">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

</li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>

<!--<div class="row" style="margin-top: 80px;">
<ul class="nav nav-pills nav-stacked" style="width: 120px;">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation">
<div class="dropdown">
<a class="dropbtn">下拉菜单</a>
<div class="dropdown-content" style="            z-index: 99;">
<a href="http://www.runoob.com">菜鸟教程 1</a>
<a href="http://www.runoob.com">菜鸟教程 2</a>
<a href="http://www.runoob.com">菜鸟教程 3</a>
</div>
</div>
</li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>-->

</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

bootstrap 水平导航 鼠标移动下拉，点击下拉。

bootstrap 水平导航鼠标移动下拉，点击下拉。