Как выделить активный элемент меню треугольником?

Question

[SokolovArtur]

Создал меню. С помощью CSS border создаю треугольник для активного элемента меню. Ошибка в том что после этого действия пункт меню смещается вправо. Как исправить?

Код

Answer 1

[Сергей Зеленский]

.navbar-toggle.navbar-left {
	float: left !important;
	margin-left: 10px !important;
}
.navbar-header .nav-collapsed {
	margin-right: 10px !important;
}
.navbar-header .nav-collapsed li {
	display: inline-block !important;
}
.navbar-nav>.active a{position:relative;}/***!!!!!***/
.navbar-nav>.active a:before {
	content: '';
	width: 0px;
	height: 10px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid #fff;
	display: block;
	position: absolute;/***!!!!!***/
	top:10px;/* отступ сверху**/
	left: 10px;/* отступ слева**/
}

если правильно вас понял, то так

Answer 2

[Сергей delphinpro]

https://jsfiddle.net/fbtzf34g/2/