JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Huvudmeny 1</a>
        <ul><li><a href="#"> hej</a></li></ul>
    </li>        
    <li>
        <a href="#">Huvudmeny 2</a>
        <ul>
            <li><a href="#">Undermeny 1</a></li>
            <li><a href="#">Undermeny 2</a></li>
            <li><a href="#">Undermeny 3</a></li>
            <li><a href="#">Undermeny 4</a></li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

ul li {
    position: relative;
    display: inline;
    margin: 0px;
    padding: 0px;
}

ul li a {
    display: inline-block;
    padding: 5px;
    background: #ccc;
}

ul li ul {
    display: none;
    position: absolute;
    top: 24px;
    left: 0;
}

ul li:hover ul {
    display: block;
}