JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<header class="jumbotron">
    <div class="container">
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li class="active"><a href="#">SUBNAVI</a>
                    <ul>
                        <li><a href="#">SUBLINK</a></li>
                        <li class="active"><a href="#">SUBLINK</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

CSS

header.jumbotron {
    position: relative;
    background-color: red;
    padding: 0;
}
header nav {
    margin: 10px 0 0 0;
    padding: 0;    
}
header nav ul {
    margin: 0;
    padding: 0;
}
header nav ul li {
    display: inline-flex;
    list-style: none;
}
header nav ul li a {
    padding: 10px 15px;
    color: #000000;
    background-color: rgba(0, 0, 0, 0.1);
}
header nav ul li a:hover {
    color: #000000;
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
header nav ul li.active a,
header nav ul li.active a:hover {
    background-color: #ffffff;
}
header nav ul li ul {
    display: none;
}
header nav ul li.active ul {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0 0 0;
    background-color: #e7e7e7;
}
header nav ul li.active ul li a {
    background-color: rgba(0,0,0,0.1);
}
header nav ul li.active ul li a:hover {
    background-color: rgba(255,255,255,0.2);
}
header nav ul li.active ul li.active a,
header nav ul li.active ul li.active a:hover {
    background-color: #ffffff;
}

JavaScript

$("header nav ul li.active ul").closest("header").css({"padding-bottom":"50px"});
$("header nav ul li.active ul").parent().children("a").css({"background-color":"#e7e7e7"});