JSFiddle - React, Tailwind, and code Playground

by Sachin Kurkute

HTML

<br>
<ul class="dropdown">
            <li>'אני נמצא ב:</li>
        	<li><a href="#">סדר זרעים</a>
        		<ul class="sub_menu">
        			 <li><a href="#">איך זה עובד?</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>        			
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        		     <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        		</ul>
        	</li>
            <span>-</span>
        	<li><a href="#">ברכות</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>        			
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        		     <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a href="#">Gmara</a></li>
        			 <li><a...

CSS

/* 
	LEVEL ONE
*/
ul.dropdown                         { position: absolute;  width: 100%; overflow:hidden }
ul.dropdown li                      { float: right; position: relative; list-style-type:none; width: auto; text-align:center;   }
ul.dropdown a:hover		            { color: #000;  }
ul.dropdown li a                    { display: inline-block; color: #222; position: relative; z-index: 2000; background-color:#fff; padding-left:5px; padding-right:5px; }
ul.dropdown li a:hover,
ul.dropdown li a.hover              { background: #F3D673; position: relative; }
.suca {}

/* 
	LEVEL TWO
*/

ul.dropdown ul 						{ display: none; position: absolute; top: 0; left: 0; width: 100px !important; z-index: 1000; } /* I set here width but it doesn't work */
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc;  width:auto;}
ul.dropdown ul li a					{ display: block; background: #eee !important; padding-right: 20px; width: 100px !important; } 
ul.dropdown ul li a:hover			{ display: block; background: #F3D673 !important; width: 100px !important; }

JavaScript

var maxHeight = 170;
$(function(){

    $(".dropdown > li").hover(function() {
    
         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller
        
        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());
        
        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");
        
        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });
        
        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                                                 
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }
        
    }, function() {
    
        var $el = $(this);
        
        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");
    
    });
    
    // Add down arrow only to menu items with submenus
    $(".dropdown > li:has('ul')").each(function()...