我的下拉菜单上出现一个小箭头[关闭]答案

【问题标题】：A little arrow appear on my dropdown menu [closed]我的下拉菜单上出现一个小箭头[关闭]
【发布时间】：2014-01-21 06:06:05
【问题描述】：

不用解释，看看就行了

http://blog.appyourself.com

尝试在标题菜单上导航，当您飞越连接按钮时，会出现一个小白色箭头，我不知道为什么

看这里：

编辑：这是代码

     <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
         <div class="container">
         <div class="navbar-header">
         <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a href="http://www.appyourself.com/" class="navbar-brand">
         <img src="http://www.appyourself.com/wp-content/uploads/2013/10/LOGO-APPYOURSELF.png"></a>
         </div>
         <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
         <div class="menu-menu-principal-container"><ul id="menu-menu-principal" class="nav navbar-nav navbar-right"><li id="menu-item-242" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Suite marketing</a>
         <ul class="dropdown-menu">
         <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/produit/cms/">Sites  &#038;  applications</a></li> <li id="menu-item-244" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/produit/crm/">CRM</a></li><!--.dropdown-->
         </ul>
         </li><li id="menu-item-276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Secteurs</a>
         <ul class="dropdown-menu">
         <li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/hotel/">Hôtel</a></li> <li id="menu-item-388" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/camping/">Camping</a></li>  <li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/bed-breakfast/">Bed  &#038;  Breakfast</a></li> <li id="menu-item-739" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/restaurant-bar/">Restaurant &#038; Bar</a></li> <li id="menu-item-692" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/spa/">Beauty &#038; Spa</a></li>    <li id="menu-item-648" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/commerces-services/">Commerces  &#038;  Services</a></li>   <li id="menu-item-649" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/agence-immobiliere/">Agence  Immobilière</a></li>   <li id="menu-item-650" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/auto-moto/">Auto-Moto</a></li>  <li id="menu-item-647" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/tpe-pme/agence-de-voyage/">Agence  de  voyage</a></li><!--.dropdown-->
         </ul>
         </li><li id="menu-item-1301" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/partenaires/">Partenaires</a></li><li id="menu-item-360" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.appyourself.com/qui-sommes-nous/">AppYourself</a></li><li id="menu-item-656" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown"><a href="http://pro.appyourself.com/users/login" class="dropdown-toggle" data-toggle="dropdown">Connexion</a>
         <ul class="dropdown-menu">
         <li id="menu-item-936" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://pro.appyourself.com/users/login?btag=hotel">Hôtel</a></li>  <li id="menu-item-937" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://pro.appyourself.com/users/login?btag=camping">Camping</a></li>   <li id="menu-item-938" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://pro.appyourself.com/users/login?btag=bb">Bed  &#038;  Breakfast</a></li> <li id="menu-item-939" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://pro.appyourself.com/users/login?btag=restaurant">Restaurant &#038; Bar</a></li>  <li id="menu-item-940" class="menu-item menu-item-type-custom menu-item-object-custom"><a>Beauty &#038; Spa</a></li><!--.dropdown-->
         </ul>
         </li>
         </ul>
         </div>

         </nav>

         </div>
</header>

【问题讨论】：

是的，需要解释一下，在这里添加代码。如果链接失效，那么问题只是 SO 上的垃圾邮件。
在此处查看 ":before" 伪元素 (w3schools)
我希望您注意到页面的其他问题，例如：在 chrome 中，您的菜单比顶部栏低一点，在移动设备上，您的小菜单栏是两倍。
我正在解决这种问题，是的，谢谢指出

标签： javascript css twitter-bootstrap

【解决方案1】：

它在魔鬼的引导程序线上（第 666 行）：

.navbar .nav>li>.dropdown-menu:before {
    content: '';
    display: inline-block;
    border-left: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0);
    border-bottom: 7px solid #CCC;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -7px;
    left: 9px;
}

删除它，或在您的自定义 CSS 中覆盖它。

正如 Danko 指出的那样，还有一个 :after 可能会导致这种情况。在（667）之后就行了：

.navbar .nav>li>.dropdown-menu:after {
    content: '';
    display: inline-block;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    border-bottom: 6px solid #FFF;
    position: absolute;
    top: -6px;
    left: 10px;
}

【讨论】：