首页 > bootstrap选中下拉菜单的子菜单时怎么样改变子菜单的背景颜色呢?

bootstrap选中下拉菜单的子菜单时怎么样改变子菜单的背景颜色呢?

我在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&quot; rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js&quot;></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;
}

【热门文章】
【热门文章】