JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<ul>
    <li><a href='#' id='nav'>this is</a>
        <ul id='show'>
            <li><a href='#'>this is</a></li>
            <li><a href='#'>some thing</a></li>
            <li><a href='#'>for you to</a></li>
            <li><a href='#'>look at fool</a></li>
        </ul>             
    </li>
    <li><a href='#'>a nav</a></li>
    <li><a href='#'>for u</a></li>
    <li><a href='#'>to see</a></li>
</ul>

CSS

a { 
  display: block; 
  line-height: 2.5; 
}
ul { 

}
li { 
   display: inline-block;
   margin: 2px;
   width: 50px; 
   background: pink;
   text-align: center; 
}
li > ul { 
  display: none;    
}

JavaScript

var $ = function(id) { 
   return document.getElementById(id);   
}; 

$('nav').addEventListener('click', show, false); 

function show(e) { 
    e.preventDefault();
    if ($('show').style.display === 'block') { 
        $('show').style.display = 'none';         
    } else { 
        $('show').style.display = 'block';    
    }
    
}