使用 css 覆盖引导程序中的下拉列表

Question

I've taken this css from this website sub-menu-drop-down-on-mouse-hover-twitter-bootstrap

and this is the code:

/*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;
}

HTML

  <ul class="nav navbar-nav" style="padding: 15px;">
                                        <li>
                                            <input autofocus type="text" ng-model="search" class="form-control ignore-max-width" name="mainsearch"
                                                   placeholder="Enter Membership Number..." style="font-size: small;">                                      

                                        </li>

                                        <li class="dropdown dropdown-large ">
                                            <a href="#/" class="dropdown-toggle no-padding" data-toggle="dropdown">
                                                <div type="button" class="btn btn-default btn-sm btn-primary">
                                                    <span class="home-link glyphicons glyphicons-menu-hamburger"></span>
                                                </div>
                                            </a>


                                            <ul class="dropdown-menu dropdown-menu-large row col-md-12">
                                                <li class="col-sm-11">
                                                    <ul style="list-style-type: none; padding: 5px;">
                                                        <li>

                                                            <div class="btn-group" role="group" aria-label="...">
                                                                <button type="button" class="btn btn-default btn-link">Left</button>
                                                                <button type="button" class="btn btn-default btn-link">Middle</button>
                                                                <button type="button" class="btn btn-default btn-link">Right</button>
                                                                <button type="button" class="btn btn-default btn-link">Right</button>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="btn-group" role="group" aria-label="...">
                                                                <button type="button" class="btn btn-default btn-link">Left</button>
                                                                <button type="button" class="btn btn-default btn-link">Middle</button>
                                                                <button type="button" class="btn btn-default btn-link">Right</button>
                                                                <button type="button" class="btn btn-default btn-link">Right</button>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </li>

                                            </ul>
                                        </li>
                                    </ul>

I want to write a custom class so only the dropdown with the that class will display on hover.

Would be good if on hover would work on this tag:

<ul class="dropdown-menu dropdown-menu-large row col-md-12">

Can a CSS guru help me out?

Answer 1

只需将li.dropdown:hover更改为li.dropdown.yourclass:hover 。