我在style样式表里加了一个li:hover{background: green;}
不起作用啊 应该怎么改呢
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 基本的按钮下拉菜单</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
li:hover{background: green;}
</style>
</head>
<body>
<div class="btn-group">
<button id='nav' class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
</ul>
</div>
</body>
</html>
第一反应是应该是a标签上面,而不是li标签上
a:hover{background: green;}
可以注意下是否被覆盖,也就是所谓的css优先级啊,我只是给你个思路,具体实现还得你自己去调
选择器的优先级问题,可以参考以下链接的文章
MDN优先级
.dropdown-menu > li > a:hover {
background: green;
}
// a以前的样式,要覆盖此样式,在上边加hover
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857;
color: #333;
white-space: nowrap;
}