如何使人字形對齊鏈接選項卡的中心

Question

我正在使用Bootstrap，並具有帶有幾個鏈接的導航欄。 前幾個鏈接具有下拉菜單。 在每個下拉菜單的頂部，我添加了一個向上旋轉的三角形，指向您剛剛單擊的鏈接。 問題是，鏈接的長度不同（品牌vs男士腕表），我希望三角形以文本為中心。 由於三角形是通過CSS在dropdown-menu的:before屬性完成的，因此我不知道如何根據dropdown類的li將其居中。

我的導航欄的引導程序： http : //www.bootply.com/ebKpdebUKh

三角形的CSS：

#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

“雪佛龍”的居中已通過使用JQuery完成。

在CODEPEN上查看完整的示例

HTML：

    <li class="dropdown">
      <a href="/brands.html" id="header-brands">BRANDS</a>
      <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;
}

我希望這可以幫助你

請享用 ：）

Answer 2

我知道這是一個可接受的答案-但您不需要jQuery-只需CSS，您就可以在鏈接文本的中心下方得到一個三角形。 我創建了一個躲閃的小導航菜單-並有一個活動鏈接，該鏈接在活動（選定）菜單鏈接下顯示一個小三角形-然后將鼠標懸停在每個鏈接上-該三角形將顯示在鏈接文本下方-並居中。 全部沒有jQuery-以及一點CSS魔術。 我還輸入了比平常更長的鏈接文本，以顯示css tringle自發地位於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"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">About</a></li> <li><a href="#">Store</a></li> <li><a href="#">Contact</a></li> <li><a href="#">An Example of a long link text.</a></li> </ul>