JSFiddle - React, Tailwind, and code Playground

by TheBanana

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
        <ul>	
            <li ><a href="#"><span class='test'>Home</span></a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>
     </ul>
</nav>

CSS

#menu
{
	width:960px; 
	height:auto; 
	margin:0 auto 0 auto;
    background:green;
}

#menu ul
{
	list-style-type:none;
}

#menu ul li 
{ 
	height:46px;
	line-height:46px; 
	font-family:'arial'; 
	font-weight:300;
	display:inline-block;
	position:relative;
	
}

#menu ul li a
{
	text-decoration:none;
	color:#ccc;  
	display:block; 
	margin-right:5px; 
	height:46px; 
	line-height:46px; 
	padding:0 5px 0 5px;
	font-size:20px; 	
}

// this boder is behind the menu!

#menu ul li.active a
{
	color:#fff;
	border-bottom:1px solid  #000000;
	
}
	
.test
{

	color:#fff;
	border-bottom:1px solid  #000000;

}

JavaScript

$(function(){

    var url = window.location.href; 

    $("#menu ul  li a").each(function() {

        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });
});