CSS setting for Tab border when page loads

Hello,

I am having trouble setting the styles for the navigation tabs. I don't want any border or the background when the tab is clicked, focused or hovered over. Below CSS is not working when the page loads for the first time after than when I click it removes the border style. Please help.

Here is my css and html code.

.nav > li {
	font-family: myFirstFont;
	color: black;
	font-size: 25px;
	border-bottom: 3px solid transparent;
	border: 0px;
	outline: none !important;
	box-shadow: none !important;
	background: none;
}


	.nav > li > a.active, .nav > li > a.active:focus, .nav > li > a.active:hover {
		border: 0px;
		border-bottom: 3px solid #B98D2D;
		outline: none !important;
		box-shadow: none !important;
		background: none;
	}


	.nav > li a:hover {
		border-bottom: 3px solid #B98D2D;
		border: 0px;
		background: none;
	}

	.nav > li.a:focus {
		border-bottom: 3px solid #B98D2D;
		border: 0px;
		background: none;
	}

Select allOpen in new window

<ul class="nav nav-tabs">
                <li role="presentation" class="active"><a data-toggle="tab" href="#cdptools">CDP TOOLS</a></li>
                <li role="presentation"><a data-toggle="tab" href="#reporting">REPORTING</a></li>
                <li role="presentation"><a data-toggle="tab" href="#faq">FAQ</a></li>
            </ul>

Select allOpen in new window