JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.ubhape2.com/stylesheets/1140.css">
<link rel="stylesheet" href="http://www.ubhape2.com/stylesheets/base.css">
<link rel="stylesheet" href="http://www.ubhape2.com/stylesheets/layout.css">
<link rel="stylesheet" href="http://www.ubhape2.com/stylesheets/lightflow.css">
<header class="container page">
<div class="row">
<div class="twelvecol logo">
<h1><a href="/">Logo</a></h1>

   <div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>

        <li>
            <a href="#">2012</a>

            <ul>
                <li><a href="#">January</a></li>

                <li><a href="#">February</a></li>

                <li><a href="#">March</a></li>

                <li><a href="#">April</a></li>

                <li><a href="#">May</a></li>

                <li><a href="#">June</a></li>

                <li><a href="#">July</a></li>

                <li><a href="#">August</a></li>

                <li><a href="#">September</a></li>
                
                 <li><a href="#">October</a></li>
            </ul>
        </li>

        <li>
            <a href="#">2011</a>

            <ul>
                <li><a href="#">March - April</a></li>

                <li><a href="#">May</a></li>

                <li><a href="#">June</a></li>

                <li><a href="#">July</a></li>

                <li><a href="#">August</a></li>

                <li><a href="#">September</a></li>

                <li><a href="#">October</a></li>

                <li><a href="#">November</a></li>

                <li><a href="#">December</a></li>
            </ul>
        </li>
    </ul>
    </div>
    </div>
</div>
</header>

<div class="container">
    <div class="row">
    <div class="twelvecol">
    <div class="color-box">
        <p>Lorem Ipsum</p>
        </div>
    </div>
    </div>
</div>

CSS

.container {
padding-left: 20px;
padding-right: 20px;
}
#navigation ul
{
position: absolute;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.row .twelvecol {
width: 100%;
float: left;
}

.color-box{
    background: #44037a;
    height: 500px;
    padding-top: 20px;
}

/* ----------------------- MENU CSS ------------------------------ */

div#navigation{    
    background: #333;
    border-radius: 4px;
}
#navigation ul, #navigation li { list-style:none; padding:0; margin:0; display:inline; }
#navigation ul li{ float:right; position:relative; }
#navigation ul li a{ 
    display:block; 
    padding:8px 12px; 
    margin:1px; 
    font-size:18px; 
    white-space:nowrap; 
    border-radius:3px; 
}
#navigation ul ul{ 
    position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#navigation ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#333; }

.overflow{
    overflow:visible !important;
}