JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li>
        <li><a href="#">html</a></li>
        <li>
            <a href="#">css</a>
                <ul class="submenu">
				    <li><a href="">1</a></li>
				    <li><a href="">2</a></li>
				    <li><a href="">3</a></li>
				    <li><a href="">4</a></li>
			    </ul>
        </li>
        
        <li><a href="#">javascript</a></li>
        <li><a href="#">php</a></li>
        <li><a href="#">python</a></li>
   <li>
</ul>

CSS

*{margin:0; padding:0}
body{
	font:12px/30px Verdana, Arial, Helvetica, sans-serif;
	background:#000}

#menu {
    width:760px;
    height:35px;
    margin:200px auto}

#menu li{
    width:150px;
    list-style:none;
    float:left;
    margin:0 1px}

#menu a{
    color:#ddd;
    text-decoration:none;
    text-align:center;
    display:block;
    background:#333;
    border-bottom:5px solid #333;
    height:100%}

#menu a:hover{
    color:#fff;
    background:#444;
    border-bottom:5px solid #f22}
/*Выпадающий список*/
.submenu, .submenu li {
	opacity: 0;
	visibility: hidden;			
}
#menu > li:hover .submenu,
#menu > li:hover .submenu li {
opacity: 1;
visibility: visible;
}