JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
					<li><a style="background-color:#000000;color:#FFFE41;text-decoration:none;font-weight:bold;" href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="history.html">Camera Phone</a></li>
					<li><a href="focus.html">Manual & Auto Focus</a></li>
					<li><a href="exposure.html">Exposure &#9660;</a>
						<ul>
							<li><a href="iso.html">ISO</a></li>
							<li><a href="aperture.html">Aperture</a></li>
							<li><a href="shutterspeed.html">Shutter Speed</a></li>
						</ul>
					</li>
					<li><a href="whitebalance.html">White Balance</a></li>
					<li><a href="lowlight.html">Low Light</a></li>
					<li><a href="epilogue.html">Epilogue</a></li>
				</ul>

CSS

body{
    font-family: Calibri, Arial, Helvetica, Sans-serif; /*most commonly easy-to-read fonts*/
}
ul#nav{
	margin-top: -9px; /*put nav in the upper-top browser*/
	list-style-type: none; /*gets rid of bullets*/
	padding: 0;
	text-align:center;
}
#nav li{
	margin: 0;
	display: inline; /*display list horizontally*/
	margin-left: -4px; /*dense the links together*/
	position:relative;
}
#nav a{
	display: inline-block; /*don't break onto new lines and follow padding accordingly*/
	padding:10px; /*give space between links*/
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
}
#nav li > ul{
	display:block;
	position:absolute;
	width:250px; /* Adjust as needed.*/
	height: auto;
	left:0; /*show menu when hovered*/
    opacity: 0;
	top: 30px; /*adjust to match the height of the parent li*/
	margin-left:-42px;
transition: all 0.1s ease-in-out; /*transition: property duration timing-function delay;*/
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
}
#nav li:hover > ul{ /*display sub menus when hovered over*/
    opacity: 1;
	z-index:100; /*places the sub nav in frontier of all elements*/
transition: all 1s ease-in-out; /*transition: property duration timing-function delay;*/
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}
#nav a:link, #nav a:visited, #nav a:active{color:#000000;text-decoration:none;font-weight:bold;} /*effects only <a> inside #nav*/
#nav a:hover{background-color:#000000;color:#FFFE41;text-decoration:none;font-weight:bold;} /*effects only <a> inside #nav*/