CSS Current Menu Item - ul li Class - css

Question

Very basic CSS issue as I can't get the current page to look different in menu. Any suggestion greatly appreciated!
Here is the genesis function
//* Add My New Menu
function my_new_menu() {
echo '<ul class="menu gn responsive-menu">
<li class="menu-item"> New Joke Book!</li>
<li class="menu-item"> Kids Jokes </li>
<li class="menu-item"><a href="/animal-jokes/"> Animal Jokes /a></li>
<li class="menu-item"> Zoo Jokes </li>
<li class="menu-item"> Contest </li>
</ul>';
}
add_action( 'genesis_header_right', 'my_new_menu' );
Here is the CSS
.gn a {
border: 1px solid transparent;
border-radius: 3px;
color: #438ed9;
display: block;
font-weight: 400;
height: auto;
line-height: 1;
margin-top: 0.2rem;
padding: 0.8rem 1rem;
position: relative;
text-decoration: none;
}
.gn a:hover,
.gn .current-menu-item > a,
.gn .sub-menu .current-menu-item > a:hover {
color: #fff;
background-color: #009900;
}

Answer 1

The easiest solution is to add your ".current" class to the corresponding "li" item.
So, for example if you are on the "kids-joke-book" page your "ul" should look like this:
<ul class="menu gn responsive-menu">
<li class="menu-item current"> New Joke Book! </li>
......
</ul>
You should do this method on every single subpage of your site where you use this menu, and add the "current" class to the correct menu item.
("current" class is an example name, it has the styles what you would like to add to the right menu item.)