JSFiddle - React, Tailwind, and code Playground

HTML

<header>
       <nav id="primar">
            <ul>
                <li class="principal" id="li1"><a class="pointer">Indhold</a></li>
                 <li class="principal" id="li2"><a class="pointer">Nyheder</a></li>
                <li class="principal" id="li3"><a class="pointer">Billeder</a></li>
            </ul>
            
        </nav>
    </header>
    <div id="sekundar" class="sekundar i1">
        <nav class="nav2">
            <ul>
                <li><a href="#">Osadff</a></li>
                <li><a href="#">Rwefewg</a></li>
                <li><a href="#">Reehjy</a></li>
            </ul>
        </nav>
    </div>

    <div id="sekundar2" class="sekundar i2">
        <nav class="nav2">
            <ul>
                <li><a href="#">dgdgdg</a></li>
                <li><a href="#">sdfdfdg</a></li>
            </ul>
        </nav>
    </div>

    <div id="sekundar3" class="sekundar i3">
        <nav class="nav2">
            <ul>
                <li><a href="#">defdgdgdg</a></li>
            </ul>
        </nav>
    </div>

CSS

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    margin: 0;
}

#logo {
    float: left;
    margin-top: 5px;
}

header {
    width: 100%;
    height: 60px;
    background-color: #1e1e1e;
}

#primar {
    text-align: center;
    float: right;
    height: 60px;
    margin-top: -16px;
}

        #primar ul li {
            height: 60px;
            display: inline-block;
            list-style-type: none;
            color: white;
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 7px;
            transition: all 0.7s ease;
            -webkit-transition: all 0.7s ease;
            -moz-transition: all 0.7s ease;
        }

            #primar ul li a, a:link, a:visited {
                text-decoration: none;
                color: white;
                font-size: 28px;
                font-weight: 100;
            }

            #primar ul li:hover {
                background: #24ac5f !important;
                transition: all 0.7s ease;
                -webkit-transition: all 0.7s ease;
                -moz-transition: all 0.7s ease;
            }

.visible {
    display: block;
}

.sekundar {
    width: 100%;
    height: 50px;
    background-color: #24ac5f;
    display: none;
    margin: 0;
}

.nav2 {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    .nav2 ul {
        height: 100%;
        float: right;
    }

        .nav2 ul li {
            display: inline-block;
            margin-top: -10px;
        }

            .nav2 ul li:last-child {
                padding-right: 0;
            }

            .nav2 ul li a, a:link, a:visited {
                text-decoration: none;
                color: white;
                font-family: 'Source Sans Pro', sans-serif;
                font-size: 24px;
                list-style-type: none;
                padding-right: 10px;
                padding-left: 10px;
      ...

JavaScript

$(document).ready(function(){
	
	$('li.principal').click(function(){
		var whatSubmenu=$(this).attr('id').slice(1)
		$('li.principal').css("background-color", "transparent")
		$(this).css("background-color", "#24ac5f")
		$('div.sekundar').hide()
		$('.'+whatSubmenu).fadeIn()
		})
		
	/*IF you don't want the submenu disappear on mouseleave comment these lines of code*/
	$('div.sekundar').on('mouseleave',function(){
		$(this).hide()
		$('li.principal').css("background-color", "transparent")
		})
	
})