Bootstrap 3 dropdown menus - html

Question

I'm new to Bootstrap/PHP, so please be gentle :-)
The code is as follows:
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright 2014 by ABC</p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Support<b class = "caret"></b>
<ul class = "nav navbar-nav navbar-right dropdown-menu">
<li>Help</li>
<li>FAQ</li>
<li>How To</li>
</ul>
</li>
</ul>
</div>
</div>
This creates a navbar on the bottom of the page with a drop-up menu.
The navbar has an inverse colour, so the text has been set to white to maximise the contrast.
Unfortunately the result is white text on a white background when attempting to select from the menu.
My guess is that I need to override Bootstrap's CSS, but I'm not sure what to override.
And I would prefer not to screw with Bootstrap's CSS file just in case I blow everything.
Many thanks

Answer 1

You have overridden link color by adding an inline style style="color: #ffffff;". This is a bad practice as it’ll take precedence on all other declarations to this element (:hover, :active, …).
If you want to change Bootstrap defaults, you should better do it in a separated CSS file. In this case the style would be:
.navbar-inverse .navbar-nav>li>a {
color: white;
}
You have extra classes on your dropdown
<ul class="nav navbar-nav navbar-right dropdown-menu">
It should be
<ul class="dropdown-menu">
You can see the result here.

Answer 2

The above ans, by LeBen is pretty much fine. But, while working on Bootstrap, keep an eye while overriding Bootstrap CSS. You can easily play it first in Firebug then override, and place a common comment with its description so you can easily make it out. And, while overriding make sure it wont affect the other part in the project, so think before overriding it