How to get chevron to align to center of link tab - html

Question

I'm using Bootstrap and have a navbar with several links. The first few links have dropdown menus. On top of each dropdown menu I added a triangle turned upward pointing to the link you just clicked. The problem is, the links are of different lengths (BRANDS vs MEN'S WATCHES) and I want the triangle centered with the text. Since the triangle is done with CSS via the :before attribute on the dropdown-menu, I don't know how to center it according to the li with the dropdown class.
Bootply of my navbar: http://www.bootply.com/ebKpdebUKh
CSS for the triangle:
#main_navbar2 .dropdown-menu:before { position: absolute;
top: -10px;
left: 55px;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #000;
border-left: 9px solid transparent;
content: '';}

Answer 1

Centering of "chevron" has been done by using JQuery.
Check complete example at CODEPEN
HTML:
<li class="dropdown">
BRANDS
<ul class="dropdown-menu multi-column columns-6" role="menu">
---- Multi column section ----
</ul>
</li>
JS:
$('.dropdown-menu , .dropdown > a').hover(function() {
$(this).parent().find('a:first-child').addClass('menu-pointer')
}, function() {
$(this).parent().find('a:first-child').removeClass('menu-pointer');
});
CSS:
#main_navbar2 .dropdown > a.menu-pointer:after {
top: 34px;
margin: auto;
position: absolute;
display: block;
border-right: 9px solid transparent;
border-bottom: 9px solid #000;
border-left: 9px solid transparent;
content: '';
left: 0;
right: 0;
z-index: 999;
width: 9px;
}
I hope this helps you
Enjoy :)

Answer 2

I know that this has an accepted answer - but you do not need jquery for it - just CSS and you can get a triangle under he center of the link text. I created a dodgy little navmenu - and have an active link which shows a little triangle under the active (selected) menu link - and then on the hover over each of the links - the triangle will show under the link text - and centered to the li. All without jQuery - and a little css magic. I also put in a longer than usual link text to show that the css tringle is autiomatically centered on the li.
.navLinks li{display:inline-block;list-style:none; text-decoration: none;padding:0 10px}
.navLinks li a, .navLinks li a:hover{text-decoration: none}
.navLinks li:hover:after,
.activeLink:after {
content: '';
position: relative;
border-style: solid;
border-width:0 9px 9px;
border-color: #006400 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -8px;
top:5px;
left: 50%;
background: none;
}
<ul class="navLinks">
<li class="activeLink">Home</li>
<li>About</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
<li>An Example of a long link text.</li>
</ul>