JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<nav id="top">
	<a class="klik" href="#">Jump to:</a>   
	<ul class="ulist">
<div> 
        <li><a href="#rest-interface">» Option 1</a></li>
        <li><a href="#communication-endpoints">» Option 2</a></li>
        <li><a href="#initiate-web-purchase">» Option 3</a></li>
</div>
	</ul>
</nav>

CSS

a.klik, a.klik:hover, .ulist li a { text-decoration: none; color: #FFF; opacity: 0.99 }
.klik { padding: 10px 70px; background: #666; border-radius: 7px; }
.ulist { margin: 0!important; padding: 0!important; display: none; background: #666; width: 195px; list-style: none; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; position: absolute; opacity: 0.99 }
ul.ulist li  { padding: 3px; }
ul.ulist li:hover { background: #999; }

JavaScript

$(document).ready(function(){
		
			$(".klik").click(function(){
				if ($(".ulist").is(':hidden'))
					$(".ulist").slideDown();
				else{
					$(".ulist").slideUp();
				}
				return false;
			});
	
			$('.ulist').click(function(e) {
				e.stopPropagation();
			});
			$(document).click(function() {
				$('.ulist').slideUp();
			});
		});
		
                function goToByScroll(id)
                {
			$('menu').animate({scrollTop: $("#"+id).offset().top},'slow');
		}