JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>        
        <li><a href="">Hvem</a></li>
        <li><a href="">Hvad</a>
            <ul>
                <li><a href="">Produkter</a></li>
                <li><a href="">Leveringer</a></li>
            </ul>
        </li>
        
        <li class="inpath"><a href="">Hvordan</a>
            <ul>
                <li><a href="">Reklame</a></li>
                <li><a href="">PR</a></li>
                <li><a href="">Websites</a></li>
                <li><a href="">Illustrationer</a></li>
                
            </ul>
            
        </li>
        <li class="last-item"><a href="">SĂĄdan!</a></li>
        
    </ul>
    
    <div class="clear"><!--clearfix--></div>
    
</div>

CSS

#menu > ul > li { }

#menu > ul > li { float: left; width: 100px; }
#menu > ul > li > a { color: red; }

#menu > ul > li > ul { background: #f1f1f1; }

JavaScript

$(document).ready(function() {
    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu > ul > li:not(.inpath)').hover(
    function() {
        $('ul', this).slideDown(100);
        $('#menu li.inpath ul').hide();
    }, function() {
        $('ul', this).slideUp(100);
        $('#menu li.inpath ul').show();
    });
});