Style Dropdown Menu on second Bootstrap Navbar - css

Question

I've styled the main navbar on my homepage to match the design of that page, but I have other pages that need to have different font colors, hover, etc. on their own pages. I added the class .navbar-gallery to the <nav> which allowed me to style the background color of the whole navbar, but I now need to change the colors of the font on the dropdown menu. My problem is that I can't seem to target just the .navbar ul.navbar-right li.dropdown ul.dropdown-menu li a on this specific navbar. I tried adding a class .gallerydropdown to the ul.dropdown-menu, but the browser ignores it. I'm sure there's a fairly easy answer that I'm missing.
Here is my full navbar:
<nav class="navbar-gallery navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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-gallery" href="index.html">ReFace It</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 navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Galleries<span class="caret"></span>
</a>
<ul class="dropdown-menu gallerydropdown">
<li class="gallery">Stone</li>
<li>Brick</li>
<li>Stucco</li>
<li>Stone/Stucco</li>
<li>Brick/Stucco</li>
</ul>
</li>
<li>Get In Touch</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
So I'm trying to target the CSS of this section:
<ul class="dropdown-menu gallerydropdown">
<li class="gallery">Stone</li>
<li>Brick</li>
<li>Stucco</li>
<li>Stone/Stucco</li>
<li>Brick/Stucco</li>
</ul>
Here is my CSS:
.navbar {
margin-bottom: 50px;
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
color: #FFFFFF;
background: transparent;
border: none; }
.navbar .navbar-header a.navbar-brand {
color: #FFFFFF;
font-weight: 500;
font-size: 1rem;
text-transform: uppercase; }
.navbar ul.navbar-right {
padding-right: 20px; }
.navbar ul.navbar-right li a {
color: #FFFFFF;
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
text-transform: uppercase;
font-weight: 500; }
.navbar ul.navbar-right li a:hover {
color: #cccccc; }
.navbar ul.navbar-right li a:visited {
color: #FFFFFF; }
.navbar ul.navbar-right li a.sm-button {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: none;
padding: .3em 1.1em;
margin-top: 0.6rem;
background-color: #f42e4e;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "PT Sans", sans-serif;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
-ms-border-radius: 180px;
border-radius: 180px;
max-width: 150px;
text-align: center; }
#media (min-width: 768px) {
.navbar ul.navbar-right li a.sm-button {
max-width: 175px; } }
.navbar ul.navbar-right li a.sm-button:hover {
background-color: #dc2946; }
.navbar ul.navbar-right li.dropdown {
background: transparent; }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background-color: transparent;
color: #FFFFFF; }
.dropdown-menu {
background-color: #FFFFFF;
padding: 0; }
.navbar ul.navbar-right li.dropdown ul.dropdown-menu li a {
color: #3C3C3E; }
.navbar ul.navbar-right li.dropdown ul.dropdown-menu li a:visited {
color: #3C3C3E; }
.navbar ul.navbar-right li.dropdown ul.dropdown-menu li a:hover {
background-color: #cccccc; }
.navbar-default .navbar-toggle .icon-bar {
background-color: #ddd; }
.navbar-default .navbar-toggle:hover {
background-color: transparent; }
.navbar-gallery {
background: #3C3C3E;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0; }
.navbar-gallery .navbar-header a.navbar-brand-gallery {
color: #FFFFFF;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
float: left;
padding: 15px 15px; }
.navbar-gallery .navbar-header a.navbar-brand-gallery:hover {
text-decoration: none; }
.navbar-gallery .navbar-default .navbar-nav > .open > a, .navbar-gallery .navbar-default .navbar-nav > .open > a:focus, .navbar-gallery .navbar-default .navbar-nav > .open > a:hover {
background-color: #3C3C3E;
color: #FFFFFF; }
.navbar-gallery .dropdown-menu {
background-color: #3C3C3E;
padding: 0; }
.navbar-gallery .dropdown-menu li.gallery a, .navbar-gallery .dropdown-menu li.gallery a:visited {
color: #FFFFFF; }

Answer 1

This is the CSS selector your looking for:
.navbar-gallery .dropdown-menu > li > a {
color: royalblue;
}
Demo JSFiddle.
Update
If you're looking for a per page override you could add a class to the <body> tag foreach page and do the following:
<body class="about">
<!-- or -->
<body class="contact">
.about .navbar ul.navbar-right li.dropdown ul.dropdown-menu li a {
color: green;
}
.contact .navbar ul.navbar-right li.dropdown ul.dropdown-menu li a {
color: green;
}