JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul class="Navigation">
           		<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
            	<li><a href="#">My Portfolio</a>
					<ul>
				   		<li><a href="#">Web Development</a></li>
				   		<li><a href="#">Motion Graphics</a></li>
				   		<li><a href="#">Flash Animation</a></li>
                   		<li><a href="#">Logo Design</a></li>
                   		<li><a href="#">Photography</a></li>
					</ul>         
			 	</li>
             	<li><a href="#">Services</a></li>
             	<li><a href="#">Contact</a></li>            
            </ul>

CSS

body{
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF,#D1D1D1	);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}

html{
  min-height:100%;
}

.Navigation{
	height: 50px;
    padding: 0;
	margin: 0;
	position: absolute;
}

.Navigation li 	{
	height: auto;
	width: 150px;
	float: left;
	text-align: center;
	list-style: none;
	font:12px "Bonveno", "Century Gothic";
	padding: 0;
	margin: 0;
	background-color: #eee;
	border: 1px solid #ccc;
	box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
	border-radius: 3px;
  margin-left:10px;
}

.Navigation a{							
	padding:13px;
	text-decoration: none; 
	color:#333;
	text-shadow: 0 1px #fff;
	display: block;
}
.Navigation li ul{
	display: none;
	height: auto;									
	margin-left: -11px;
	padding: 0;		
}				

.Navigation li:hover ul{
	display: block;
}

.navbar li ul li {
	background-color:#eee;
  	border: 1px solid #ccc;
} 

.Navigation li:hover, a:hover {
	 background: #e8e8e8;
}