Html 更改引导程序导航栏下拉菜单悬停颜色

change bootstrap navbar dropdown menu hover color

提问by maura rwn

I try to change hover color of dropdown menu in nav bar. but i coulden't it. any one can plz help me. this is my html.how I change the hover color using css?

我尝试更改导航栏中下拉菜单的悬停颜色。但我做不到。任何人都可以请帮助我。这是我的 html。如何使用 css 更改悬停颜色？

<div class="navbar navbar-inverse" id="menu">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li class="dropdown active"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Service <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="registration.html">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
             </li>
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="registration.html">house Plan design</a></li>
                    <li><a href="#">Interior Design</a></li>
                    <li><a href="#">Gardning DEsign</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
             </li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    </div>

回答by Suganth G

Try this:

尝试这个：

Remove background-imageand use background-color

删除background-image和使用background-color

 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-image:none !important;
 }
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color:red;
 }

DEMO

演示

To Change the Arrow Color use this:

要更改箭头颜色，请使用以下命令：

<span class="caret" style="color: red;"></span>

UPDATED DEMO

更新的演示

回答by HTTP

The default css rule of bootstrap 3 to dropdowns background hover is

bootstrap 3 下拉背景悬停的默认 css 规则是

.dropdown-menu>li>a:hover {
   color: #262626;
   text-decoration: none;
   background-color: #f5f5f5;
} //somewhat on line 6 or 7

To change that you may want to add your custom css rule and I recommend you to add your own id or class to target to the dropdown rather than to override the default using its own selector so that other dropdows will not be affected.

要更改这一点，您可能需要添加自定义 css 规则，我建议您将自己的 id 或类添加到下拉列表中，而不是使用自己的选择器覆盖默认值，这样其他下拉列表就不会受到影响。

.your-class>li>a:hover {
   background-color: red !important;
}

Hope it helps.

希望能帮助到你。

回答by Mahesh Thumar

You might wants to override the CSS of framework like below.

您可能想要覆盖如下所示的框架的 CSS。

.navbar dropdown li a:hover {
   background-color: #b5b5b5;
}

回答by tomexsans

To change the background of the dropdown menu, try this

要更改下拉菜单的背景，试试这个

nav.navbar ul li > ul {
  background: #2B3E50;
  box-shadow: none;
}

just use the inspect element of the browser and you will see the entire structure of the dropdown and how bootstrap added some classes. you can use that to modify the framework to your needs.

只需使用浏览器的检查元素，您就会看到下拉列表的整个结构以及引导程序如何添加一些类。您可以使用它来根据您的需要修改框架。