JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    	<div id="top_nav">
        	<ul>
            	<li><a href="#" class="hover">home</a></li>
                <li><a href="#">about us</a></li>
                <li><a href="#">production</a></li>
                <li><a href="#">Our Goals</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">More Blogs</a></li>
                <li><a href="#">Updates</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!--Блок с верхней навигацией-->
</div>

CSS

ul {
	list-style-type:none;
	}
	
body {
	background:#c0c0c0;
	font-family:"Trebuchet MS", Tahoma, sans-serif;
	font-size:14px;
	color:#929292;
	}
	
#wrapper {
	width:1000px;
	background:#434343;
	height:1000px;
	margin:0 auto;
	}
	
#top_nav {
	padding-bottom:10px;
	background-color:#8a2400;
	}
	
#top_nav ul{
	background:#ccc;
	overflow:hidden;
	border-top:1px solid #000;
	border-bottom:1px dotted #8a2400;
	}
	
#top_nav li {
	float:left;
	}

#top_nav li:first-child {
	margin-left:43px;
	}
	
	
#top_nav a {
	display:block;
	font-weight:bold;
	font-size:10px;
	color:#8d8769;
	text-transform:uppercase;
	padding:10px 18px;
	text-decoration:none;
	}
	
#top_nav a.hover {
	color:#fff;
	background:#ca2a04;
	}
	
#top_nav a:hover {
	
	color:#fff;
	background:#ca2a04;
	}