JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
   <li class="program"><a href="#">Program</a>
   <div class="second nav">
     <ul>
       <li><a href="#">Teknik</a></li>
       <li><a href="#">Naturvetenskap</a></li>
       <li><a href="#">El</a></li>
     </ul></div></li>
  <li><a href="#">Nösnäs</a></li>
  <li><a href="#">Schema</a></li>
  <li><a href="#">Matsal</a></li>
</ul>

CSS

* { margin:0;
padding:0;
}

html {height: 100%;}

body{
    position: relative;
    height: 100%;
    background: #fff;

}
.close{display:none;}


/* Första boxarna*/
ul.nav {
    list-style: none;
    display: block;
    width: 170px;
    position: relative;
    top: :0px;
    left: 10px;
	z-index:0;
    padding: 100px 0 50px 0;

    -webkit-background-size: 50% 100%;
	display: list-item;
	font-family: OpenSans-Regular;
	font-size: 18px;
    
}




li {
    margin: 5px 0 0 0;
}

/* När jag drar musen över */
ul.nav li a  {
    -webkit-transition: all 0.3s ease-out;
   
    color: #174867;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 5px;
  
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px 2px #888;
}

ul.nav li a:hover {
   
    color: #67a5cd;
    padding: 9px 15px 7px 30px;
}
ul.nav li ul { 
display:none;
}
ul.nav li:active ul { 
display:block;
position:relative;
left:3px;
top:0px;
list-style: none;
z-index:999;
background: #888;
}

ul.nav li ul li
{ 
background:#888;

}

JavaScript

$(".program").on('click',function () {
   $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
   e.stopPropagation();
});