JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
        <ul>
           <li><a href="../help.html">HJEM</a></li>
           <li><a href="instructions.html">FORUM</a></li>
           <li>
                 <a href="instructions.html">DONER</a>
                 <ul class="submenu" >
                    <li><a href="legal.html">SERVERE</a>
                    <li><a href="legal.html">FAQ</a></li>
                    <li><a href="legal.html">KONTAKT</a></li>
                 </ul>
           </li>
        </ul>
      </nav>

CSS

nav {margin: 3px auto; width: 700px;}
    nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
    nav ul li a {
        background: #FFFFFF;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-weight: 300;
        font-size: 18px;
        text-align: center;
        color: #717171;
        text-decoration: none;
        float: left;
        padding: 8px 0;
        width: 106px;
        margin: 0px 10px 0 0;
    }
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}

nav ul li ul.submenu {
	position: absolute;
    width: auto;
	display:none;
    top: 35px;
}
nav ul > li:hover > ul {
	left: 0;
    display: block;
}