JSFiddle - React, Tailwind, and code Playground

HTML

<div class='menucontainer'>
    <ul class='level1'>
        <li>
            <a href='#'>Menupunkt 1</a>
            <ul class='level2'>
                <li>
                    <a href='#'>Underpunkt 1
                    <ul class='level3'>
                        <li>
                            <a href='#'>Underunderpunkt</a>
                            <ul class='level3'>
                                <li>
                                    <a href='#'>
                                        Underunderpunkt
                                        <ul class='level3'>
                                            <li>
                                                <a href='#'>Underunderpunkt</a>
                                            </li>
                                            <li>
                                                <a href='#'>Underunderpunkt</a>
                                            </li>
                                            <li>
                                                <a href='#'>Underunderpunkt</a>
                                            </li>
                                            <li>
                                                <a href='#'>Underunderpunkt</a>
                                            </li>
                                        </ul>
                                    </a>
                                </li>
                                <li>
                                    <a href='#'>
                                        Underunderpunkt
                                        <ul class='level3'>
                                            <li>
                                                <a href='#'>Underunderpunkt</a>
                                            </li>
                                            <li>
                                                <a href='#'>Underunderpunkt</a>
                                            </li>
              ...

CSS

body {
    font-size:12px;
}

a {
    color:black;
}

li {
    cursor:pointer;
}

.menucontainer {
    position:relative;
    width:500px;
}

ul.level1 {
    position:relative;
    width:100%;
    z-index:0;
}

ul.level1 li, ul.level2 li {
    float:left;
}

ul.level2 {
    left:0px;
    top:16px;
    width:500px;
    z-index:1;
}

ul.level2 li {
    position:relative;
}

ul.level2, ul.level3 {
    position:absolute;
}

ul.level3 {
    top:0px;
    z-index:2;
}

ul.level1 li {
    background:red;
}

ul.level2 li {
    background:green;
}

ul.level3 li {
    background:blue;
}

JavaScript

$(document).ready(function() {
    $('ul.level2').each(function() {
        var _this = $(this),
            children = _this.find('ul.level3');
        
        children.each(function() {
            var child = $(this),
                parent = child.parent();
            child.css('left', parent.width());
        });
        
        _this.add(children).hide();
    });
    
    $('li').hover(function() {
        $(this).children('ul').show();
    }, function() {
        $(this).children('ul').hide();
    });
});