Как сделать появляющуюся черту с анимацией в CSS?
Когда добавляете сверху border-top: 5px solid #fff;
Добавьте также свойство margin-top: -5px;
Либо можно изначально задавать border-top: 5px solid transparent;
и при ховере указывать border-top: 5px solid #fff;
Часть кода css для навигации: /*all statement*/

.navbar-nav > li > a {
	color: #fff;
	font-size: 15px;
	font-family: 'Myriad Pro';
	color: rgb( 255, 255, 255 );
	text-transform: uppercase;
	padding-top: 35px;
	display: inline-block;

}

.navbar-default .navbar-nav > li > a {
	color: #fff;
	 -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

/*active statement*/

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;

}

/*hover statement*/

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;
}