JSFiddle - React, Tailwind, and code Playground

by snoopydaniels

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>
            <ul class="horizontalDropMenu">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a>
                        <ul>
                            <li><a href="#">SubOption 1</a>
                                <ul>
                                    <li><a href="#">SubSubOption 1</a></li>
                                    <li><a href="#">SubSubOption 2</a></li>
                                    <li><a href="#">SubSubOption 3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">SubOption 2</a></li>
                            <li><a href="#">SubOption 3</a></li>
                            <li><a href="#">SubOption 4</a></li>
                        </ul>
                </li>
                <li><a href="#">Option 3</a></li>
                <li><a href="#">Option 4</a></li>
            </ul>
        </div>
    </body>
</html>

CSS

/* 
    Document   : default
    Created on : Aug 22, 2012, 10:42:33 PM
    Author     : Daniel
    Description:
        Purpose of the stylesheet follows.
*/
 * {
    border: 1px solid black;
}

root { 
    display: block;
}

ul.horizontalDropMenu {
    position: relative;
}

ul.horizontalDropMenu li{
    display: inline;
    list-style-type: none;
    margin: 0px;
}

ul.horizontalDropMenu ul {
    margin-left: 0px;
    padding-left: 0px;
    display: none;
}

ul.horizontalDropMenu a {
    display: inline-block;
    min-height: 25px;
    min-width: 60px;
}

ul.horizontalDropMenu ul ul a {
    display: block;
    min-height: 20px;
    min-width: 60px;
}

ul ul {
    position: absolute;
}

ul.horizontalDropMenu ul li {
    display: list-item;
}

JavaScript

$(document).ready(function(){
                var horizontalDropMenu = $("ul.horizontalDropMenu");
                var links = horizontalDropMenu.find("a");
                var submenus = horizontalDropMenu.children().children("ul");
                submenus.each(function(){
                    coordinates = $(this).prevAll("a").position();
                    coordinates.top += $(this).prevAll("a").outerHeight();
                    $(this).css({"position": "absolute", "top":coordinates.top, "left":coordinates.left});
                });
                var subSubmenus = submenus.find("ul");
                subSubmenus.each(function(){
                    console.log($(this).prevAll("a").outerWidth(true));
                    coordinates = $(this).prevAll("a").offset();
                    coordinates.left += $(this).prevAll("a").outerWidth(true);
                    $(this).css({"position": "absolute", "top":coordinates.top, "left":coordinates.left})
                });
                
                links.hover(function (){
                    $(this).nextAll("ul").show();
                    links.parentsUntil(horizontalDropMenu).clearQueue();
                    $(this).nextAll("ul").clearQueue();
                },function (){
                    $(this).nextAll("ul").delay(500).hide(1);
                    $(this).nextAll("ul").find("ul").delay(500).hide(1);
                });
                
                submenus.mouseout(function (){
                    $(this).delay(500).hide(1);
                    $(this).find("ul").delay(500).hide(1);
                });
            });