JSFiddle - React, Tailwind, and code Playground

by Santana Moll

HTML

<div class="header-div" id="header">
<div id="buttons-container" >
            <a href="#header" class="open-menu-primary"><span>menu</a>
            <a href="#" class="close-menu-primary"><span>close</span></a>
</div>
</div>
  <nav class="navigation" id="navigation">
  <ul class="mainmenu" id="mainmenu">
    <li><a href="">main1</a></li>
    <li id="hover-sub"><a href="#">main2</a>
      <ul id="submenu">
                <li class="menu-item"><a href="#">sub1</a></li>
                <li class="menu-item"><a href="#">sub2/a></li>
      </ul>
    </li>
    <li><a href="" class="con">main3</a></li>
  </ul>
</nav>

CSS

body {
font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;    
padding:0;
margin:0;
}
#header {
    width: 100%;
    height:100px;
}
/* Hide Menu*/
#mainmenu{
    display: none;
}
#buttons-container a.close-menu-primary{
    display: none;
}

    /* Display Menu Items */
#header:target #mainmenu{
    display: block;
}
#buttons-container a.close-menu-primary{
    display: none;

}
/* Hide Open Toggle Link */
#header:target #buttons-container a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#header:target #buttons-container a.close-menu-primary{
    display: block;
}