JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<ul id="topnav">
    <li><a href="#">Меню 1</a>
    <span class="li1">
            <a href="#">Подменю 1</a> 
            <a href="#">Подменю 2</a> 
            <a href="#">Подменю 3</a>
            <a href="#">Подменю 4</a> 
            <a href="#">Подменю 5</a>
        </span>
    
    </li>
    <li class="li1">
        <a href="#">Меню 2</a>
        <!--Здесь начинается подменю-->
        <span class="li1">
            <a href="#">Подменю 1</a> 
            <a href="#">Подменю 2</a> 
            <a href="#">Подменю 3</a>
        </span>
        <!--Заканчивается подменю-->
    </li>
    <li class="li2">
        <a href="#">Меню 3</a>
        <span class="li2">
            <a href="#">Подменю 1</a> 
            <a href="#">Подменю 2</a> 
           
        </span>
    </li>
</ul>

CSS

ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 970px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background: url(http://mix-up.ru/demo/horizontal-dropdown-submenu/topnav_stretch.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}
ul#topnav .active { background: #1376c9 url(http://mix-up.ru/demo/horizontal-dropdown-submenu/topnav_active.gif) repeat-x; }
 
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 970px;
    background: #1376c9;
    color: #fff;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
/*ul#topnav li:hover span { display: block; }*/
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

JavaScript

$(document).ready(function() {
    $("ul#topnav li").eq(0).addClass("active");
    $("ul#topnav li").hover(function() {
        $("ul#topnav li.active").find("span").hide();
        $("ul#topnav li.active").removeClass("active");                    
        $(this).addClass("active");
        $(this).find("span").show();
    });
});