<nav>
	<button id="menu-btn-example1" aria-expanded="false" aria-haspopup="true">Press me!</button>
		<ul role="menu" class="menu-btn-example-ul" hidden>
			<li>
			<a href="#" role="menuitem">Option 1</a>
		</li>
		<li>
			<a href="#" role="menuitem">Option 2</a>
		</li>
		<li>
			<a href="#" role="menuitem">Option 3</a>
		</li>
	</ul>
</nav>

button {
    font-size: 1.25rem;
    border-radius: 0.33em;
    font-family: inherit;
    background: #111;
    color: #fefefe;
    padding: 0.75rem;
    border: 0;
}

ul {
	list-style: none;
	width: 150px;
	margin-top: 0px;
	padding-left: 0px;
	border-bottom-left-radius: 0.33em;
    border-bottom-right-radius: 0.33em;
    border-top-right-radius: 0.33em;
    border: 1px solid black;
}

ul > li {
    font-size: 1.25rem;
    font-family: inherit;
    background: #fff;
    color: #000;
    padding: 0.75rem;
    border: 1px solid black;

}

ul > li a {
	width: 100%;
}

ul > li:hover {
	background-color: aliceblue;
}

ul > li a:focus {
	background-color: aliceblue;
}

const menuButton = document.getElementById('menu-btn-example');

menuButton.addEventListener('click', function(){
	let expanded = this.getAttribute('aria-expanded') === 'true';
	this.setAttribute('aria-expanded', !expanded);
	let exampleMenu = this.nextElementSibling;
	exampleMenu.hidden = !exampleMenu.hidden;
})