我的下拉菜单上会出现一个小箭头

时间:2014-01-03 14:30:25

标签: javascript css twitter-bootstrap

无需解释只需看看

http://blog.appyourself.com

尝试在标题菜单上导航,当你飞过连接bouton时出现一个小白箭头我不知道为什么

见这里:

enter image description here

编辑:这是代码

     <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>

1 个答案:

答案 0 :(得分:3)

它在Devil的引导线上(第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;
}