JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body  style="background:#bbb;">
<div id="nav">

<ul class="select">
<li><a href="#"><b>1</b></a>
<ul class="sub">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>

<ul class="current"> <!-- <<<== активное меню -->
<li><a href="#"><b>4</b></a></li>
</ul>
<ul class="sub_active"> <!-- <<<== активное подменю меню -->
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="current_sub"><a href="#">7</a></li> <!-- <<<== активная страница -->
<li><a href="#">8</a></li>
</ul>

<ul class="select">
<li><a href="#"><b>9</b></a>
<ul class="sub">
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

CSS

ul#nav {
    list-style-type:none; /* Отмена маркеров списка */
    margin:0;
    padding:0;
}

#nav {
    float:left;
    width:100%;
    height:75px; /* Высота всего меню (и верхнего уровня и нижнего, все вместе) */
    position:relative;
    margin:0; /* Отступ сверху и снизу от меню */
}

#nav .select, #nav .current {
    margin:0 10px;
    padding:0;
    list-style:none;
    display:block;
}

#nav li {
    display:inline;
    margin:0;
    padding:0;
    height:auto;
}

#nav .select a, #nav .current a {
    display:block;
    height:40px; /* Высота верхнего уровня */
    float:left;
    padding:0 0 0 5px;
    text-decoration:none;
    font:normal 18px Tahoma; /* Размер шрифта верхнего уровня */
    line-height:40px;
    white-space:nowrap;
    margin-right: 0; /* Отступы пунктов верхнего уровня */
    position: relative;
    z-index: 500;
}

#nav .select a b, #nav .current a b {
    height:100%;
    display:block;
    padding:0 10px 0 5px;
    color:#ffffff; /* Цвет ссылок верхнего уровня */
}

#nav .select a:hover, #nav .select li:hover a {
        cursor:pointer;
}

#nav .select a:hover b, #nav .select li:hover a b {
    color:#ffffff;
}

#nav .sub {
    display:none;
}

#nav .current a {
        background-image:url("images/left_nav.png");
        background-repeat:no-repeat;
    background-position:0 -50px;
    border:none;
}
#nav .current a b {
        background-image:url('images/right_nav.png');
        background-repeat:no-repeat;
    background-position:100% -50px;
    color:#ffffff; /* Цвет шрифта активного меню верхнего уровня */
}


#nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover {
    color:#f6ff00; /* Цвет шрифта активного меню нижнего уровня */
    text-decoration:underline;
        font:normal 14px Tahoma;
}


#nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active {
    display:block;
    position:absolute;
   ...