Style Dropdown Menu on second Bootstrap Navbar
<p>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 <code>.navbar-gallery</code> to the <code>&lt;nav&gt;</code> 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 <code>.navbar ul.navbar-right li.dropdown ul.dropdown-menu li a</code> on this specific navbar. I tried adding a class <code>.gallerydropdown</code> to the <code>ul.dropdown-menu</code>, but the browser ignores it. I'm sure there's a fairly easy answer that I'm missing. </p>

<p>Here is my full navbar:</p>

<pre><code>&lt;nav class="navbar-gallery navbar navbar-default"&gt;
&lt;div class="container"&gt;
  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand-gallery" href="index.html"&gt;ReFace It&lt;/a&gt;
  &lt;/div&gt;

  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="dropdown"&gt; 
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Galleries&lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/a&gt; 

        &lt;ul class="dropdown-menu gallerydropdown"&gt; 
          &lt;li class="gallery"&gt;&lt;a href="stone.html"&gt;Stone&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#"&gt;Brick&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#"&gt;Stucco&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#"&gt;Stone/Stucco&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Brick/Stucco&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt; 
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact" class="page-scroll sm-button"&gt;Get In Touch&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
&lt;/div&gt;&lt;!-- /.container-fluid --&gt;
&lt;/nav&gt; 
</code></pre>

<p>So I'm trying to target the CSS of this section:</p>

<pre><code>&lt;ul class="dropdown-menu gallerydropdown"&gt; 
   &lt;li class="gallery"&gt;&lt;a href="stone.html"&gt;Stone&lt;/a&gt;&lt;/li&gt; 
   &lt;li&gt;&lt;a href="#"&gt;Brick&lt;/a&gt;&lt;/li&gt; 
   &lt;li&gt;&lt;a href="#"&gt;Stucco&lt;/a&gt;&lt;/li&gt; 
   &lt;li&gt;&lt;a href="#"&gt;Stone/Stucco&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Brick/Stucco&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; 
</code></pre>

<p>Here is my CSS:</p>

<pre><code>.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 &gt; .open &gt; a, .navbar-default .navbar-nav &gt; .open &gt; a:focus, .navbar-default .navbar-nav &gt; .open &gt; 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 &gt; .open &gt; a, .navbar-gallery .navbar-default .navbar-nav &gt; .open &gt; a:focus, .navbar-gallery .navbar-default .navbar-nav &gt; .open &gt; 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; }
</code></pre>