JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin:30px">
<ul class="pageselect">
<li class="dropdown-pageselect">Choose page</li>
<li class="drop"><a href="#">subpage 1</a></li>
<li class="drop"><a href="#">subpage 2</a></li>
<li class="drop"><a href="#">subpage 3</a></li>
<li class="drop"><a href="#">subpage 4</a></li>
<li class="drop"><a href="#">subpage 5</a></li>
<li class="drop"><a href="#">subpage 6</a></li>
<li class="drop"><a href="#">subpage 7</a></li>
<li class="drop"><a href="#">subpage 8</a></li>
</ul>
</div>

CSS

.pageselect{border-width:1px 1px 0 1px; border-style:solid; border-color:black; width:200px;list-style-type:none;}
.dropdown-pageselect{background-color:#EBEBEB;border-bottom:1px solid black;}
.drop{background-color:#FAFAFA;border-bottom:1px solid black;}
.dropdown-pageselect, .drop{padding:4px;}
.dropdown-pageselect:hover{cursor:pointer;}
.drop:hover{background-color:#EBEBEB;}

JavaScript

$(".drop").hide();
$(".dropdown-pageselect").click(function(){
	$(".drop").slideToggle(300);
});