JSFiddle - React, Tailwind, and code Playground

by Tech Savant

HTML

<ul id="navlist">
<li id="active">
  <a href="#" id="current">
   <div id ="container1">
        <div id="d1">

        <div id="left-arrow"></div>
        <span>Language</span> 
        <div id="couldBeAnImage"></div>
        
       </div>
    </div>   
   </a> 
    
    <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">English</a></li>
        <li><a href="#">Spanish</a></li>
        <li><a href="#">Japanese</a></li>
        <li><a href="#">German</a></li>
    </ul>

</li>
</ul>

CSS

ul#navlist { font-family: sans-serif; }
ul#navlist a { text-decoration: none; color: white; }
ul#navlist, ul#subnavlist, li#subactive, ul#navlist ul, ul#navlist li, #active { list-style-type: none; width: 250px !important; overflow:hidden; margin:0;padding:0; background: #404040; }
ul#navlist li { float: left; }
ul#navlist li a:hover { color: #F7A11A; }
#left-arrow {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent;position: relative; float: right; left: 100px; border-top: 10px solid #404040;}
#d1 span { float: left; position: relative; left: -15px; }
ul#subnavlist { display: none; width:250px !important; }
ul#subnavlist li { float: none; width:250px !important;padding: 0px; margin: 0px;}
ul#subnavlist li a {color: white; padding: 0px; margin: 0px;}
ul#navlist li:hover ul#subnavlist {display: block; position: relative; font-size: 8pt;
padding-top: 5px;top:0;left:0;width:250px !important;background-color:#F7A11A;}
ul#navlist li:hover ul#subnavlist li a {display: block;width: 250px;border: none;padding: 7px 10px; }
#container1{height: 20px; padding: 5px;}
#couldBeAnImage {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #404040;float: right;}
#navlist:hover #couldBeAnImage {border-top: 10px solid #F7A11A; -moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg); -webkit-transform: rotate(180deg); position: relative;top: 4px;}
#navlist:hover #d1 span { color: #F7A11A; }
#couldBeAnImage { -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; position: relative;top: 4px;}
#left-arrow {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent;float: left;border-top: 10px solid white;top: 4px;-webkit-transition: -webkit-transform .8s ease-in-out;-ms-transition: -ms-transform .8s...

JavaScript

$('#navlist').find('#left-arrow').hover(function() {
    $(('#navlist').find('#left-arrow')).css('transform', 'translate(200px) rotate(180deg)');


});