Foundation 5 Top Bar Mega Menu

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<div class="contain-to-grid">
   <nav class="top-bar" data-topbar role="navigation">
      <ul class="title-area">
         <li class="name">
            <h1><a href="#">Årsplanering</a></h1>
         </li>
         <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
         <li class="toggle-topbar menu-icon"><a href="#"><span>Iconer</span></a>
         </li>
      </ul>
      <section class="top-bar-section">
         <!-- Right Nav Section -->
         <ul class="left">
            <li class=""><a href="#"><span>Från:</span></a>
             </li>
            <li class=""><input type="text" id="dt1" style="width: 50px;font-size: 9px;border-radius: 20px;">
            </li>
            
               <li class=""><a href="#"><span>Till:</span></a> 
                </li>
               <li class=""><input type="text" id="dt2" style="width: 50px;font-size: 9px;border-radius: 20px;">
            </li>
            
         </ul>


      </section>
   </nav>
</div>

CSS

body {
    padding: 60px;
}
.top-bar { position: relative; }
.has-mega {
    background-color: #333333 !important;
    padding: 5px;
}
.has-mega .title, .has-mega p {
    padding: 7px 0 7px 0;
    font-size:0.8rem;
    color: #FFF;
    font-weight: 600;
}
@-webkit-keyframes topbar-dropdown {
    0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        opacity: 1.0;
    }
}
@-moz-keyframes topbar-dropdown {
    0% {
        -moz-transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        -moz-transform: translateY(0);
        opacity: 1.0;
    }
}
@-ms-keyframes topbar-dropdown {
    0% {
        -ms-transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        -ms-transform: translateY(0);
        opacity: 1.0;
    }
}
@keyframes topbar-dropdown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1.0;
    }
}
.top-bar .title-area {
    position: relative;
    z-index: 1;
}
.top-bar-section > ul {
    z-index: 0;
}
.expanded .top-bar-section > ul {
    -webkit-animation: topbar-dropdown 0.2s ease-in-out;
    -moz-animation: topbar-dropdown 0.2s ease-in-out;
    -ms-animation: topbar-dropdown 0.2s ease-in-out;
    animation: topbar-dropdown 0.2s ease-in-out;
}
@media screen and (min-width: 768px) {
    .top-bar-section > ul {
        position: initial;
        z-index: initial;
    }
}