JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<body>

  
  <div class="escondido">
	<ul id="speise">
<li><a id="frueh" href="">Frühstück</a></li>
<li><a id="sup"   href="">try1</a></li>
<li><a id="sal"   href="">try2</a></li>
<li><a id="nud"	  href="">Nud</a></li>
<li><a id="crep"  href="">Crepes</a></li>
<li><a id="sueß"  href="">try5</a></li>
			</ul>
		</div>
    
    <div id="front">
        <table id="probe1">
            <tr>
                <td>something somthing else</td>
                <td></td>
            </tr>
        </table>
        
        <table id="probe2">
            <tr>
                <td>house</td>
                <td>world</td>
            </tr>
        </table>
        
    </div>
  
  
</body>

CSS

#probe1, #probe2 {
             display: none;
         }

          #front {
          display:none;
          position:relative;
          height:600px;
          width:100%;
          background-color:lightblue;  
        
        }
      
      .escondido{
        position:relative;
        background-color:lightyellow;
        width:100%;
        height:30px;
      }
      
      #speise a{
        padding:10px;
      }

      #speise{
        position:relative;
        padding:10px;
      }
      #speise li{
        display:inline;
      }
      
      ul#speise a:hover{
        background-color:lightblue;
      }

JavaScript

$("li a").hover(function(){
   $("li a").removeClass('active');
    $(this).addClass('active');
});

$("#crep, #front").hover(function (e) {
    e.preventDefault();
    $("#front").stop().fadeIn(); 
    if($("#crep").hasClass('active')){
      $("#probe1").css('display','block');
    }
},function(){
     $("#front").stop().fadeOut();
    $("#probe1").css('display','none');
});

$("#nud, #front").hover(function (e) {
     e.preventDefault();
     $("#front").stop().fadeIn();
     if($("#nud").hasClass('active')){
      $("#probe2").css('display','block');
    }
},function(){
     $("#front").stop().fadeOut();
    $("#probe2").css('display','none');
});