JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
        <div class="row">
            <div class="span12">
            
                <header>
                    <div class="header-banner clearfix">
                        <div class="header-contact">
                        </div>
                        <div class="header-headline"><h1><a href="/">hauptnav</a></h1></div>
                    </div>
                </header><!-- /header -->
                
            </div><!-- /.span12 -->
        </div><!-- /.row -->
            
        <div class="row">
            <div class="span12">

                <nav>
                    <ul id="mainnav">
                        <li class="active"><a href="index.html">haupt</a>
                            <ul class="flyout">
                                <li><a href="#">Unterpunkt 1.1</a></li>
                                <li><a href="#">Unterpunkt 1.2</a></li>
                                <li><a href="#">Unterpunkt 1.3</a></li>
                                <li><a href="#">Unterpunkt 1.4</a></li>
                            </ul>
                        </li>
                        <li class="spacer"></li>
                        <li><a href="cx.html">haupt</a>
                            <ul class="flyout">
                                <li><a href="#">Unterpunkt 2.1</a></li>
                                <li><a href="#">Unterpunkt 2.2</a></li>
                                <li><a href="#">Unterpunkt 2.3</a></li>
                                <li><a href="#">Unterpunkt 2.4</a></li>
                            </ul>
                        </li>
                        <li class="spacer"></li>
                        <li><a href="hauptnav.html">hauptnav</a></li>

                    </ul>

                
                </nav><!-- /nav -->
 
                                
            </div><!-- /.span12 -->
        </div><!-- /.row -->
        
        <div class="row">
            <div class="span12">
      ...

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #e9eef2;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    color: #003b6c;
}


header {
    margin: 0;
    padding: 0;
    height: 115px;
    background-color: #fff;
    color: #003b6c;
}

nav {
    height: 100px;
    background-color: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
    display: block;
}



div#overlay {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9;
}





/* http://typo3blogger.de/responsive-design-mit-typo3/ */
img, embed, object, video {
  max-width: 100%;
  height: auto;
  width: 100%;  /* was: auto*/
}

DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
    float: none;
}

/* IE8 HACK */
/*
@media \0screen {
    img, object, embed, video {
        width: auto; /* for ie 8 */
    }
}
*/

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



div.header-banner {
    margin: 0;
    padding: 0;
    position: relative;
    top: 35px;
    left: -1%;
    background-color: #003b6c;
    height: 80px;
    width: 102%;
}

div.header-headline {
    background: transparent url(../img/bg/bg_sprite.png) no-repeat 0 5px;
    width: 415px;
    height: 80px;
    margin: 0 0 0 1em;
}





/* teaser */
div.teaser-column {
    border: 2px solid #fff;
    padding: 0.5em;
    margin: 0.5em 0;
}

div.teaser-column:hover {
    border: 2px solid #fd9000;
    cursor: pointer;
}

div.teaser-column p,
div.teaser-column div.csc-textpic-text p {
    
}

div.feature-column...

JavaScript

$('#mainnav a').hover(
         function () {
            $("body").append('<div id="overlay"></div>');
            $("#overlay").fadeIn(300);
            //return false;
         }, 
         function () {
           console.log('out');
           $("#overlay").remove();
           //return false;
         }
    );