Bootstrap dropdown menu text color - css

Question

So i'm working with Twitter's Bootstrap for the first time and I'm trying to change the color of the text inside the dropdown menus once they have collapsed. (if that makes sense)
I used this site (<<<--- link to CSS i am using) to help with some CSS but i can't seem to find the right code block that changes the color of the correct text.
When you compress the webpage so it shows the collapse menu and go to the Dropdown list, you will see that the blue background transfers over to the dropdown menu items, but the font-color is black making it very hard to read. I want this font to be white.
<nav class="navbar navbar-custom" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ATR Notary</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="~/Order/Index" class="dropdown-toggle"
data-toggle="dropdown">Orders <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>View Orders</li>
<li>Add Order</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="~/Notary/Index" class="dropdown-toggle"
data-toggle="dropdown">Notaries <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>View Notaries</li>
<li>Add Notary</li>
</ul>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div><!-- /.navbar-collapse -->
</nav>

Answer 1

You should be able to use this CSS..
/*-- change navbar dropdown color --*/
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
Demo: http://www.bootply.com/113750

Answer 2

Apply simple css and you are done
See this example:
.navbar{height:70px; padding-top:20px; }
will change height and padding of navbar - that is outter container
.dropdown-menu{background:rgba(0,0,0,0.5); color:white; }
will change background color of dropdown-menu - that is ul under dropdown link.
All we have to understand the structure of navbar.
.dropdown-menu li>a{color:white; }
.dropdown-menu>li{padding:5px; border-bottom:1px solid white;border-left:1px
solid white;border-right:1px solid white }
.dropdown-menu li>a:hover{background:white; }

Answer 3

previous answer is saying the same thing pretty much, but their syntax and commenting was a little confusing for me, so possibly it confused others too...
you're first calling out the 'dropdown-menu' class, then the 'li' html element within that class, then, the 'a' html element nested within the 'li' element, so CSS looks like this:
.dropdown-menu li a {
color: white;
}