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">
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li class="active"><a href="#">SUBNAVI</a>
                <ul>
                    <li><a href="#">SUBLINK</a></li>
                    <li><a href="#">SUBLINK</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</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);
}
/* Folgendes würde ich per Elternselektor machen */
header.jumbotron {
    padding-bottom: 50px;
}
header nav ul li.active a {
    background-color: #e7e7e7;
}