JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/main.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/darkbox.css">
<script src="jscript/darkbox.js"></script>
</head>
<header>
<meta name="Author" content="Nathan Hartmann">

</header>
<body>
<div class="container"> <!-- Main Container -->
<div class="banner"><img src="pictures/bannerTestPage.jpg"></div>
<div class="menu"> <!-- Menu Container -->
<ul> <!-- Main UL -->
	<li onclick="top.location.href='#'">Home</li> <!-- Main LI -->
	<li onclick="top.location.href='#'">Photos <!-- Main LI -->
		<ul> <!-- Secondary UL -->
			<li onclick="top.location.href='#'">Family</li> <!-- Secondary LI -->
			<li onclick="top.location.href='#'">Nature</li> <!-- Secondary LI -->
			<li onclick="top.location.href='#'">Personal</li> <!-- Secondary LI -->
		</ul> <!-- Secondary UL END -->
	</li> <!-- Main LI END -->
<li onclick="top.location.href='#'">Shopping</li> <!-- Main LI -->
<li onclick="top.location.href='#'"> Contact</li> <!-- Main LI -->
</ul> <!-- Main UL END -->
</div> <!-- Menu Container END -->
<div class="contents"> <!-- Contents Container -->

</div> <!-- Contents Container END -->
</div> <!-- Main Container END -->
</body>
</html>

CSS

*{	
	background:#ffffff;
	color:#0099ff;
	margin:0 auto;
	text-align:center;
	padding:0;
}
.container{
	width:relative;
	margin:0 auto;
	min-width:775px;
}
.menu{
  position:relative;
	z-index:1;
}
.menu ul /* main UL */{

	list-style:none;
	margin:0;
	padding:0;
	z-index:30;
	background:#000000;
	opacity:.2;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}
.menu ul:hover /* main UL Hover*/{
	z-index:3;
	opacity:1;
}
.menu ul li /* main LI */{
	color:#000000;
	font: bold 12px/18px sans-serif;
	display: inline-block;
	margin-right: -4px;
	position: relative;
	padding: 15px 20px;
	background: #ffffff;
	border-radius:6px;
	cursor: pointer;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}
.menu ul li:hover /* main LI hover function */{
	background:#9fff80;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}
.menu ul li ul /* secondary UL */{
	background: #ffffff;
	position: absolute;
	top: 47px;
	left: 0px;
	opacity: 0;
	visibility: hidden;
}
.menu ul li ul li /* secondary LI */{
	width:100px;
	padding: 15px 20px;

}
.menu ul li:hover ul /* secondary LI function hover over main LI */{
	display: block;
	opacity: 1;
	visibility: visible;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}
.contents{
	z-index:0;
	border-radius: 6px;
	position:relative;
	min-height:100px;
	margin-top:20px;
	width:1000px;
	padding:20px;
}