jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>

		      <ul class="nav navbar-nav navbar-right">
		        <li>
		        	<a href="#">
		        		HOME
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		ABOUT
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		TEAM
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		SERVICES
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		PORTFOLIO
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		CONTACT
		        		<div></div>
		        	</a>
		        </li>
		      </ul>

CSS

.activeItemNav{
    height: 1px;
    width: 36px;
    border: 1px solid #fe3434;
    margin-top: 12px;
    margin: 10px auto;
}
ul li{
   text-align:center;
}

JavaScript

$('ul > li > a').mouseenter(function(){
       $(this).find('div').addClass('activeItemNav').siblings('div').removeClass('activeItemNav');
   });