I'm currently in the process of making a navigation bar for a website using bootstrap. Everything seems to be working as expected. However on the menu I have a li which then displays a dropdown. This is where the problem comes in. When I click on the li the background seems to change to black and I can't figure out where that's coming from.

My markup looks as follows:

<div class="navbar navbar-inverse navbar-fixed-top" runat="server">
<div class="container">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav" runat="server">
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li class="dropdown"><a runat="server" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">Training Group<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

I want so when I the back ground stays white. I've tried

.navbar> li.dropdown.active.open > a { background-color: #fff; }

But it doesn't seem to change the background colour. Can someone shed some light on where I'm going wrong please.

Thanks in advance for your help and support

CodePen

The first comment (by Tamil Selvan) may work for you (assuming the rule is specific enough), but it'd probably help if you knew why your original code fails: the reason is that > after .navbar. That > is a direct-child selector and the lis are not direct children of .navbar.

UPDATE: author posted a Pen and it became more clear he wasn't targeting the dropdown-menu at all, it was about the triggering element, so here's what helped:

Looks like the CSS responsible for the black background color on the LI that you click to reveal the dropdown is:

.navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover.navbar-inverse