2

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.

enter image description here

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

Improve this question
8
  • 1
    try .navbar li.dropdown.active.open a { background-color: #fff; } Commented Dec 16, 2015 at 14:18
  • use .navbar li.dropdown.active.open a { background-color: #fff !important; }. If that does not work, please build a JSFiddle and I'll help you further Commented Dec 16, 2015 at 14:18
  • @TamilSelvan Still the same Commented Dec 16, 2015 at 14:20
  • Can you post the css for dropdown-toggle? What does inspect element on said menu item say? Can you see any #000? Commented Dec 16, 2015 at 14:22
  • 1
    did you try what we told you? If it stil does not work, consider building a JSFiddle reproducing the problem. Commented Dec 16, 2015 at 14:42

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I've updated my markup to the exact structure I have can you please kindly tell me how would I change my css
Because of the way CSS specificity works, it's not possible to give you a guaranteed working answer based on the markup alone. One would have to know what CSS is already inherited by the intended element.
I've created a code pen with the current css I have
I was just going through the bootstrap css file and realised it's exactly what you said and you get there before.. Thanks for pointing it out I appreciate it. This is what I wrote in my css .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover { background: #fff; color: #000; } you can update your answer and ill accept it so others can benefit from it too
Thanks for all your help and support bud, it's much appreciated
|
0

Try this code if Tamil's snippet doesn't work:

.navbar-nav > li > .dropdown-menu { background-color: #FF0000; }

Like the other posters are saying it would be a lot easier to help if you posted the CSS the dropdown is already inheriting.

Improve this answer

1 Comment

I've added a code pen with the css in there too and you snippet adds colour to the dropdown items and not the Training Group li when it's opened

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.