JSFiddle - React, Tailwind, and code Playground

by Birowsky

HTML

<div class="sc_menu3">
  <ul class="sc_menu3">
    <li><a href="#"><span>Item</span></a></li>
    <li><a href="#"><span>Special Item</span></a>
        <ul class="blendingMenu">
            <li>SubSpecial</li>
            <li>SubSpecial</li>
            <li>SubSpecial</li>
        </ul>
    </li>
    <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
  </ul>
</div>

CSS

/*---------------------SCROLLING MENUS--------------------------*/

div.sc_menu, div.sc_menu2, div.sc_menu3 {
    /* Set it so we could calculate the offsetLeft */
    position: relative;
    width: 450px;
    margin-bottom:10px;
}
ul.sc_menu, ul.sc_menu2, ul.sc_menu3 {
    display: block;
    /* max width here, for users without javascript */    
    width: 8000px;     

}
.sc_menu li, .sc_menu2 li, .sc_menu3 li {
    display: block;
    float: left;
    padding: 0 4px;
}
.sc_menu a, .sc_menu2 a, .sc_menu3 a {
    display: block;
    text-decoration: none;
}
.sc_menu span, .sc_menu2 span, .sc_menu3 span {
    display: block;
    padding: 15px;
    text-align: center;
    font-size: 20px;
    font-weight:bold;
    color: #7C454F;
    background-color: #AEAEAE;

}
         .sc_menu2 span, .sc_menu3 span {
            font-size: 12px;
            font-weight:normal;
            border-radius:3px;
            
        }
.sc_menu a:hover span, .sc_menu2 a:hover span, .sc_menu3 a:hover span {
    display: block;
    background-color:#A4A4A4;
    color: #94525E;
}

/*-----BLENDING MENU----------*/
.blendingMenu{
    margin-top:-7px;
    background-color:gray;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    overflow:hidden;
    padding-top:7px;
    height:0em;
    font-size:12px;
    position:absolute;
    z-index:1000000;
    
}
    .blendingMenu li{
        float:none;
        position:relative;
    }
        .blendingMenu li:hover{
            background-color:#6C3;
        }

JavaScript

var div3 = $('div.sc_menu3'),
        ul3 = $('ul.sc_menu3'),
        ulPadding = 15;
    
    //Get menu width
    var divWidth = div3.width();
 
    //Remove scrollbars    
//    div3.css({'overflow': 'hidden'}); //UNCOMENT THIS LINE TO SEE THE PROBLEM <<<------------
//    div3.css({'overflow-y': 'visible'});
    
    //Find last item
    var lastLi3 = ul3.find('li:last');
    
    //When user move mouse over menu
    div3.mousemove(function(e){
        var ulWidth = lastLi3[0].offsetLeft + lastLi3.outerWidth() + ulPadding;    
        var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
        div3.scrollLeft(left);
    });

//blending menu-------------------
$('.blendingMenu').css({'width':'89px'});

$('.blendingMenu').mouseover(function(){
    $(this).stop().animate({
        height:'5em'
    });
});
$('.blendingMenu').mouseout(function(){
    $(this).stop().animate({
        height:'0em'
    });
});