JSFiddle - React, Tailwind, and code Playground

by aaronk85

HTML

<div id="footer-links">
        <div class="footer-nav">
        <a href="http://www.gameday.com.au/" alt="GameDay.com.au" title="GameDay.com.au" class="footer-nav-item gd"></a>
        <a target="_top" href="http://www.sportingpulse.com/" alt="SportingPulse.com" title="SportingPulse.com" class="footer-nav-item sp"></a>
        <a target="_top" href="http://corp.sportingpulse.com/index.php?id=6" alt="About Us" title="About Us" class="footer-nav-item au"></a>
        <a target="_top" href="http://corp.sportingpulse.com/index.php?id=55" alt="Advertise" title="Advertise" class="footer-nav-item ad"></a>
        <span target="_top" alt="Contact Us" title="Contact Us" class="footer-nav-item cu"></span>
            <div class="contact-option" style="display:none;">
                <div class="contact-sp"><a target="_top" href="http://corp.sportingpulse.com/index.php?id=66">Contact SportingPulse</a></div>
                <div class="contact-assoc"><a target="_top" href="http://corp.sportingpulse.com/index.php?id=66">Contact Your Association</a></div>
            </div>
 <a target="_top" href="http://support.sportingpulse.com/" alt="Support" title="Support" class="footer-nav-item s"></a>
        <a target="_top" href="http://corp.sportingpulse.com/index.php?id=75" alt="Privacy" title="Privacy" class="footer-nav-item pr"></a>
        <a target="_top" href="http://sport.gameday.com.au/index.php?id=103" alt="Search" title="Search" class="footer-nav-item se"></a>
    </div>
    <div class="sp-logo"><a target="_top" href="http://www.sportingpulse.com/" alt="Powered by SportingPulse" title="Powered by SportingPulse" class="ps"></a></div>
</div>

CSS

#footer-links {float:left; display:inline;margin: 200px 0 0 0;}
.contact-option {
  background: none repeat scroll 0 0 red;
  height: 100px;
  margin: -100px 0 0 270px;
  position: absolute;
  width: 250px;
}
.contact-extra {display:none;}
.footer-nav {
  float: left;
  margin: 20px 0 0 70px;
}

a.footer-nav-item {
    background: url("http://www-static.sportingpulse.com/images/footer/spanz/footer_link_text.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    float: left;
    height: 10px;
    margin: 0 20px 0 0;
}
#footer-links .gd {
    background-position: 0 0;
    width: 80px;
}
#footer-links .sp {
    background-position: 0 -11px;
    width: 97px;
}
#footer-links .au {
    background-position: 0 -22px;
    width: 46px;
}
#footer-links .ad {
    background-position: 0 -33px;
    width: 52px;
}
#footer-links .cu {
    width: 55px;
        background: url("http://www-static.sportingpulse.com/images/footer/spanz/footer_link_text.png") no-repeat scroll 0 -44px transparent;
    display: inline-block;
    float: left;
    height: 10px;
    margin: 0 20px 0 0;
}
#footer-links .s {
    background-position: 0 -55px;
    width: 43px;
}
#footer-links .pr {
    background-position: 0 -66px;
    width: 39px;
}
#footer-links .se {
    background-position: 0 -77px;
    width: 45px;
}
#footer-links .ps {
    background: url("http://www-static.sportingpulse.com/images/footer/spanz/sp_logo.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    float: right;
    height: 24px;
    margin: 12px 12px 0 0;
    width: 128px;
}

JavaScript

$('.cu').click(function() {
    $('.contact-option').toggle();
});