layout.php

<?php
add_action('kronos_header','site_header',1);
function site_header() { ?>
        <div class="wrap header-wrap">
            <div class="header-container">
                <div class="site-header">
                    <h1 class="site-title">
                        <a title="<?php echo get_bloginfo( 'description' );?>" href="<?php echo esc_url(home_url('/'));?>" rel="home"><?php echo get_bloginfo( 'name' );?></a>
                    </h1>
                    <?php do_action('kronos_show_menu','primary'); ?>
                </div>
            </div>
        </div>
    <?php
}

add_action('kronos_show_menu','site_menu',1);
function site_menu($menu) {
        $args = array(
            'theme_location' => $menu,
            'container' => 'div',
            'container_id' => 'menu',
            'echo' => true,
            'items_wrap' => '<ul id = "%1$s" class = "%2$s">%3$s</ul>',
            'depth' => 2,
        );
        wp_nav_menu( $args );
}

main.js

// Add .active class for better CSS targeting
$(function(){ //
    $('#menu ul.menu').find('li.current_page_item,li.current_page_parent,li.current-page-ancestor,li.current-cat,li.current-cat-parent,li.current-menu-item').addClass('active');
    $('#menu ul.sub-menu').prepend('<span class="sub-indicator">&nbsp;</span>');
});

theme.scss

#menu {
    float: right;
    position: relative;
    top: em(-15);
    ul {
        list-style: none;
        margin:0;
        padding: 0;
        li {
            float: left;
            margin: 0 14px;
            position: relative;
            line-height: em(52);
            a {
                text-transform: uppercase;
                color: #454545;
                font-weight: 600;
                font-size: em(16);
                &:hover {
                    color: $brand;
                }
            }
            &.active {
                a {
                    color: #000;
                    font-weight: 800;
                }
            }
        }
        ul {
            display: none;
        }
        li:hover > ul {
            position: absolute;
            display: block;
            top: em(48);
            left:-16px;
            z-index: 99;
            background: #fff;
            box-shadow: 1px 2px 2px rgba(0,0,0,0.35);
            padding: em(6) 0;
            border-top: 1px solid #f4f4f4;
            @include fadeIn (
                $duration: .5s,
                $delay: 0,
                $function: ease,
                $visibility: hidden,
                $fill: both
            );
            .sub-indicator {
                position: absolute;
                background: url('../img/sub_indicator.png') no-repeat;
                width: 19px;
                height: 10px;
                left: 20px;
                display: block;
                top: -10px;
            }
            li {
                float: left;
                width: em(200);
                padding: 0;
                line-height: em(18);
                border-bottom: 1px solid #f4f4f4;
                a {
                    color: hsl(0, 0%, 35%);
                    display: block;
                    font-weight: 400;
                    text-transform: none;
                    padding: em(8) 0;
                    &:hover {
                        color: $brand;
                    }
                }
            }
        }
    }
}