JSFiddle - React, Tailwind, and code Playground

by 44db

HTML

<script src="http://demos.44db.com/jsfiddle/jquery.mousewheel.js"></script>
<script src="http://demos.44db.com/jsfiddle/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="http://demos.44db.com/jsfiddle/jquery.jscollpane.css">
<link rel="stylesheet" href="http://demos.44db.com/jsfiddle/style.css">
<div id="wrap">

    <nav>
        <ul>
            <li><a href="" title="">αποκαταστάσεις</a>
                <ul>
                    <li><a href="" title="">ναοί</a></li>
                    <li><a href="" title="">μοναστήρια</a></li>
                    <li><a href="" title="">κοσμικά κτήρια</a></li>
                    <li><a href="" title="">βιομηχανικά κτήρια</a></li>
                    <li><a href="" title="">οικιστικά σύνολα</a></li>
                    <li><a href="" title="">αρχαιολογικοί χώροι</a></li>
                </ul> <!-- level 2 -->
            </li> <!-- αποκαταστάσεις -->
            <li><a href="" title="">-> hover here</a>
                <ul>
                    <li><a href="" title="">αθλητισμός</a></li>
                    <li><a href="" title="">-> then here</a>
                            <ul class="scrollpane" style="width:280px;height:200px;overflow:auto;position:absolute;top:0px;left:120px;">
                                <li><a href="" title="">(1993) Cafe-Bar "Classique"</a></li>
                                <li><a href="" title="">(1995) Cafe Bresler's</a></li>
                                <li><a href="" title="">(1998) Εστιατόριο Nest</a></li>
                                <li><a href="" title="">(1998) Δημοτικό κατάστημα πολλαπλών χρήσεων</a></li>
                                <li><a href="" title="">(2001-2002) Cafe-Bar, Ξενοδοχείο &laquo;ΑΝΕΜΑ&raquo;</a></li>
                                <li><a href="" title="">(2000) Cafe-Bar SKIPPER</a></li>
                                <li><a href="" title="">(2003) Εστιατόριο Δ. Γράβου</a></li>
                                <li><a href="" title="">(2005)...

JavaScript

// Document Ready
    $(function() {
        $(".scrollpane").jScrollPane();
        $("nav ul li").hover(function() {
                $(this).find('ul:first:hidden').fadeIn();
                $('a:first',this).addClass('active');    
            }, function() {
                $('a:first',this).removeClass('active');
                $(this).find('ul:first').fadeOut();
        });
    });