bootstrap change active button on navbar, CSS, HTML
<p>Hello I am new to html and CSS, I am using bootstrap to create a website. I am looking to change the color of the active button on the right nav bar. Also would like to change the text colour when hovered over I've seen a few examples, but I am unable to apply it to this example. Thanks in advance. </p>

<p>HTML:</p>

<pre><code>&lt;div class="Menu"&gt;
  &lt;nav class="navbar navbar-inverse navbar-static-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-  toggle="collapse" data-target="#navbar"&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-left" href="http://www.website.com"&gt; &lt;img src="Logo.png" alt="LOGO"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar3" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
    &lt;!--/.container-fluid --&gt;
  &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>navbar-right{
    padding-top: 35px;
}

img {
    padding-top: 17px;
    padding-left: 17px;
}

.jumbotron {
    padding-top: 10px;
    padding-bottom: 48px;
    border: 2px solid black;
}

.navbar-inverse .navbar-nav &gt; li &gt; a {
    color: green;
} 

.navbar3 &gt; .navbar-nav .navbar-right&gt;.active {
    color:red;
    background-color:yellow;

}
.navbar3 &gt; .navbar-nav .navbar-right&gt;.active &gt; a,
.navbar3 &gt; .navbar-nav .navbar-right&gt;.active &gt; a:hover,
.navbar3 &gt; .navbar-nav .navbar-right&gt;.active &gt; a:focus{
    color:red;
    background:blue;
}
</code></pre>

<p><a href="https://i.stack.imgur.com/AAsVd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AAsVd.jpg" alt="enter image description here"></a></p>