Saji
Saji

Reputation: 165

How to freeze background on li - Bootstrap

I want to have background color on Videos even on mouseleave. Tried almost everything but I can't figure it out. I'm new in bootstrap, any help would be much appreciated.

Here is my html & css: enter image description here

<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">SikFrik</a>
    </div>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Videos <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Marchandise</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Entainment</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Multiplayer</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Comics</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">9GAG</a>
                    </li>
                    <li class="divider"></li>
                </ul>
            </li>
            <li><a href="#">Category</a>
            </li>
            <li><a href="#">Entertainment</a>
            </li>
        </ul>
        <form role="search" class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" placeholder="Search" class="form-control">
            </div>
        </form>

    </div>
</nav>

CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css JS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

Upvotes: 0

Views: 306

Answers (1)

gopalraju
gopalraju

Reputation: 2309

li.dropdown:hover > a.dropdown-toggle{
 background:#333;
}

Upvotes: 1

Related Questions