JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-left-fr">
           	<nav id="services-fr">
            <a href="#" class="menu" id="services-fr-2">Services</a>
            </nav>
            
      
        
        <div id="nav-right-fr">
            <nav id="clients-fr">
            <a href="#" class="menu" id="clients-fr-2">Clients</a>
            </nav>

        </div>
        
        <section class="clearfloat">
        </section>
     
     <footer>
<!-- green pouch -->
	<section>
        <img src="http://montrealwebdevelopment.com/sami_images/website-design-green.png" id="green-pouch-fr"/>
    </section>
</footer>

CSS

#green-pouch-fr{
		position:absolute;
		margin-top:35px;
		padding:0px !important;
		margin-bottom:0px !important;
		}
		
	
	.clearfloat{
		clear:both
		}

.servicesFr{
	position:absolute;
	display:none;
}
.clientsFr{
	position:absolute;
	display:none;
}

JavaScript

// JavaScript Document
$(document).ready(function() {
	$('nav').hover(
		function () {
			$(this).css({"background-color":"#108040"});
			}, 
				function () {
					$(this).css({"background-color":""});
				}
	);

	$('#services-fr-2').on('click',function(){

		$(".clientsFr").hide();
		$('.servicesFr').fadeToggle();
		$('#green-pouch-fr').animate({
			'top':'450px'//,
			//'height':'450'
		});
		
	});

			
});