JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>


<!--Create Menus-->

<nav>
<ul class="menu">
	<li><a href="index.html">link1</a></li> <!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
		<ul><li><a href="#">sublink1</a></li></ul>
	<li><a href="#">link2</a></li>
		<ul>
			<li><a href="#">sublink1</a></li>
			<li><a href="#">sublink2</a></li>
			<li><a href="#">sublink3</a></li>
			<li><a href="#">sublink4</a></li>
		</ul>
	<li><a href="#">link3</a></li>
	<li><a href="#">link4</a></li>
</ul>
</nav>

</body>

CSS

body {
    margin:0px;
}

a {
	text-decoration: none;
	width: 8em; /*width of each link*/
}

/*format list*/
ul {
	text-align: center;
    margin:0;
    padding:0;
    list-style: none;
}

ul.menu {
    height: 2.5em;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: #454545; 
}

ul.menu li {
	float: left;
	position: relative;
}

ul.menu li a {
	cursor: pointer; 
    display: block; 
    color: white; 
    line-height: 2.5em; 
    padding: 0 10px; 
}

ul.menu ul {
	background: #555; 
    display: none; 
    position: absolute;
    left: 0; 
    top: 100%;
}

ul.menu li:hover {
	background: red;
}

ul.menu li:hover > ul {
	display: block;
	background: green;
}