Editing a particular element in inactive/hover/active states - html

Question

I am using the Foundation framework for my website and the following code is what I'm focusing on in my HTML file:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>jDispatch</h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
Menu
<ul class="dropdown">
<li>Link one</li>
<li>Link two</li>
</ul>
</li>
</ul>
</section>
</nav>
I am wondering how do I edit the dropdown button itself (which has text 'Menu') and edit it for all of its possible states (inactive, hovered over, and clicked on)?
By inspection of the code on Foundation's actual website (which of course uses their own framework), I have been able to modify the inactive and hovered over states with the following CSS code respectively:
/* inactive/not hovered or clicked */
.top-bar-section li:not(.has-form) a:not(.button) {
background: yellow;
color: blue;
}
/* hovered over */
.top-bar-section li:not(.has-form) a:not(.button):hover {
background: green;
color: yellow;
}
I figured .top-bar-section li:not(.has-form) a:not(.button):active {...} would do the trick, but it didn't.
EDIT: Also how do I change the font-family of the dropdown items? Using .top-bar-section ul li > a {...} I can change the text color of the 'Menu' button and all of its dropdown items with color, but using font-family only changes the font for the 'Menu' button.

Answer 1

.top-bar-section li:not(.has-form) a:not(.button):active {...} will change the style for 'Menu' when clicked on.
But if 'Menu' is also linking to another page, you will only see the styles on active for a second, if you see them at all before the new page loads.
Check out the codepen demo here
.top-bar-section li:not(.has-form) a:not(.button):active {
background-color: blue;
color: white;
}