JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<aside class="nav-container">

  <!--Main Navigation Structure-->
    <ul id="nav-main">
      <a href="#"><li class="fa fa-home fa-2x" id="home">home</li><br/></a>
      <a href="#"><li class="fa fa-folder fa-2x" id="projects">project</li><br/></a>
      <a href="#"><li class="fa fa-user fa-2x" id="about">about</li><br/></a>
      <a href="#"><li class="fa fa-envelope fa-2x" id="contact">contact</li><br/></a>

      <!--Additional Navigation Buttons-->
      <div id="nav-additionals">
          <a href="#"><p class="fa fa-cogs fa-s" id="settings">aaaa</p></a>
          <a href="#"><p class="fa fa-question fa-s" id="about">aaaa</p></a>
      </div>
    </ul>

    <!--Projects submenu-->
    <ul id="proj_menu">
      <a href="#"><li class="icon-python">phyton</li></a>
      <a href="#"><li class="icon-java-bold">java bold</li></a>
      <a href="#"><li class="icon-csharp">csharp</li></a>
      <a href="#"><li class="icon-cplusplus">cplus</li></a>
      <a href="#"><li class="icon-javascript">javascript</li></a>
      <a href="#"><li class="icon-html">html</li></a>
      <a href="#"><li class="icon-ruby">ruby</li></a>
      <a href="#"><li class="icon-php">php</li></a>
    </ul>
		
</aside>

CSS

#projects{
	border:1px solid red;
}
ul li{
	list-style:none;
}

.nav-additionals{
	border:1px olid green;
}

#nav-main a{
	float:left;
	border:1px solid red;
	padding:10px;
}

JavaScript

$("#proj_menu").hide();

    //shows and hides projects sub menu
    $("#projects").mouseover(function(){

      //if it is hovered SHOW
      if($("#projects").is(":hover")){
          $("#proj_menu").show();
      } else{
			  $("proj_menu").hide();
			}
      
    });