JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<header><div class="page-width">
    <img src="http://www.advncs.com/i/ADVlogo.png" alt="ANCS Logo"/>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services<span></span></a>
            <ul>
                <li><a href="#">GIS Mapping</a></li>
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Help Desk Services</a></li>
                <li><a href="#">Legacy Conversion</a></li>
                <li><a href="#">Mobile Development</a></li>
                <li><a href="#">Network Security</a></li>
                <li><a href="#">Project Management</a></li>
                <li><a href="#">Systems Administration</a></li>
                <li><a href="#">Virtualization</a></li>
                <li><a href="#">Web &amp; Application Development</a></li>                                
            </ul>   
        </li>
        <li><a href="#">Projects</a>
            <ul>                    	        
                <li><a href="#">Notable Projects</a></li>                            
                <li><a href="#">In the News</a></li>
            </ul>   
        </li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div></header>
<div id="body"><h1>Page Title Header</h1></div>
<footer>
    <address>
        <p class="title"><span>Ad</span>vanced<br/>
            Network &amp; Computer Services</p>
        <p>2009 Maxwell Ave<br/>
            Evansville, IN 47711<br/>
            812<span>.</span>602<span>.</span>6600</p>
    </address>
</footer>

CSS

body, html {
    margin: 0;padding: 0;border: 0;
    height: 100%; width: 100%;
    font-family: UI, Tahoma, Sans-serif;
}
body {
    background-image: url('http://www.advncs.com/i/servers.png');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: 50% 70%;
}
header, footer {background-color:rgba(0,0,0,0.5); width: 100%;}
header .page-width {position: relative; height: 100%;}
header img {position: relative; height: 90%; top: 5%; left: 1em;}
header {height: 6em; border-bottom: solid 1px #999;}
#body  {margin-top: 1px;background-color:rgba(255,255,255,0.85);padding: 1em 2em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
footer {bottom:0;border-top: solid 1px #999;text-align: right; color: #eee;}
footer address {padding: 1em; font-size: 0.75em; font-style: normal;}
footer address p {margin: 0;}
@media all and (max-height: 650px) {
    header {height:2.5em;}
    #body  {bottom:4.125em;top:2.5em;}
    header img {height:175%; top: -50%;}}
@media all and (max-height: 500px) {
    footer .title {display: none;}
}
#body, .page-width {
    width: 1024px;
    margin: auto;
}
#nav, #nav ul, #nav li {
    margin: 0; padding: 0;
    list-style-type: none;
    
}
#nav {
    position: absolute;
    right: 0; bottom: -1px;
    z-index: 100;
}
#nav li {
    position: relative;
    display: inline-block;
}
#nav li ul {
    max-height: 0;
    overflow:hidden;
    position: absolute;
    top: 100%;
    border-left: solid 2px #00ADEE;
    background-color: rgba(0,0,0,0.8);
    box-shadow: 4px 2px 1em rgba(0,0,0,0.8);
}
#nav li:hover ul {max-height: 20em; z-index: 2;}
#nav ul li {
    display: block;
    font-size: 0.875em;
}
#nav ul a {white-space: nowrap}
#nav ul a:hover {background-color: rgba(255,255,255,0.2);
}
#nav a {
    padding: 0.5em 1em;
    color: #eee;
    text-decoration: none;
    display: block;
}
footer address span,
#nav a:hover {color: #00ADEE;}
#nav > li > a {
    text-transform:...

JavaScript

function sizeContent(){
    $('#body').css('minHeight', $('body').height()-$('header').outerHeight(true)-$('footer').outerHeight(true));
}
$(window).resize(sizeContent);
$(document).ready(function(){
    sizeContent();
    var ULn, ULo = false;
    $('#nav').children('li').hover(function(){
        if(ULo) {
            ULo.addClass('hide');
        }
        if($(this).has('ul').length){
            ULn = $(this).children('ul');
            ULn.removeClass('hide').css('max-height', ULn[0].scrollHeight);
        }
    },function(){
        if(ULn) {
            ULo = ULn;
            ULo.removeAttr('style');
        }
    });
});