对于插入符号…我还没见过有人指定简单的CSS完全阻止插入符号。

给你:

.caret {
    display: none !important;
}

还添加了margin-top:0来重置.dropdown-menu的引导css边距，这样当用户缓慢地从下拉菜单悬停到菜单列表时，菜单列表不会消失。

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}

内联使用两个链接。用下拉按钮隐藏链接，并在可见链接上添加onmouseover事件以单击下拉菜单。

<a class="pretty-button"
   href="#" alt="Notifications"
   onmouseover="$('#notifications-dropdown').click()">
</a>

<a style="display:none"
   id="notifications-dropdown"
   class="js-nav js-tooltip js-dynamic-tooltip"
   href="#"
   alt="Notifications"
   data-toggle="dropdown">
   <span class="fa fa-flag fa-2x"></span>
</a>

为了让菜单在悬停时自动下落，这可以使用基本的CSS实现。您需要计算出隐藏菜单选项的选择器，然后将其设置为在适当的li标记悬停时显示为块。以twitter引导页面为例，选择器如下所示:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

然而，如果你正在使用Bootstrap的响应特性，你将不希望这个功能出现在折叠的导航栏上(在较小的屏幕上)。为了避免这种情况，可以将上面的代码包装在媒体查询中:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

要隐藏箭头(插入符号)，这取决于你是使用Twitter Bootstrap版本2或更低版本3，以不同的方式完成:

引导3

要在版本3中删除插入符号，你只需要从.dropdown-toggle锚定元素中删除HTML <b class="插入符号"></b>:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 &更低

要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议更详细地了解:after伪元素是如何工作的。为了让你开始理解，在推特引导例子中瞄准并删除箭头，你将使用以下CSS选择器和代码:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

如果你深入研究这些方法，而不是仅仅使用我给你的答案，这会对你有利。

感谢@CocaAkat指出，我们错过了“>”子组合子，以防止子菜单显示在父悬停

这适用于WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

引导版本4和5解决方案。(兼容)

这些都是使用mouseover和mouseleave事件和一些屏幕宽度检查的完整解决方案。这比纯CSS解决方案更好。

Bootstrap v5 -纯JS(用于webpack)

export class BootstrapOpenMenuHover {

/**
 * Constructor.
 */
constructor() {
  this.windowWidth = window.innerWidth;
  this.mobileBreakPoint = 991; // Put your menu break point here, when it switches to a hamburger icon.
  this.dropdownNavItems = document.querySelectorAll(".dropdown-toggle.nav-link");
  this.dropdownMenuItems = document.querySelectorAll(".dropdown-menu");

  this.setEventListeners();
}

/**
 * Set all of our event listeners.
 */
setEventListeners() {
  const _self = this;

  // To be safe set the width once the dom is loaded.
  window.addEventListener('load',  function () {
    _self.windowWidth = window.innerWidth;
  });

  // Keep track of the width in the event of a resize.
  window.addEventListener('resize',  function () {
    _self.windowWidth = window.innerWidth;
  });

  // Bind our hover events.
  if (_self.dropdownNavItems !== null)  {
    for (let i = 0; i < _self.dropdownNavItems.length; i++) {

      // On mouse enter.
      _self.dropdownNavItems[i].addEventListener('mouseenter', function () {
        if (_self.windowWidth >= _self.mobileBreakPoint) {
          this.classList.add('show');
          this.ariaExpanded = true;
          this.dataset.bsToggle = null;

          // Update the .dropdown-menu
          this.nextElementSibling.classList.add('show');
          this.nextElementSibling.dataset.bsPopper = 'none';
        }
      });

      // On mouse leave.
      _self.dropdownNavItems[i].addEventListener('mouseleave', function () {
        if (_self.windowWidth >= _self.mobileBreakPoint) {
          this.classList.remove('show');
          this.ariaExpanded = false;
          this.dataset.bsToggle = 'dropdown';

          // Update the .dropdown-menu
          this.nextElementSibling.classList.remove('show');
          this.nextElementSibling.dataset.bsPopper = null;
        }
      });
    }
  }

  // Bind events to .dropdown-menu items.
  if (_self.dropdownMenuItems !== null) {
    for (let i = 0; i < _self.dropdownMenuItems.length; i++) {
      // On mouse enter.
      _self.dropdownMenuItems[i].addEventListener('mouseenter', function () {
        if (_self.windowWidth >= _self.mobileBreakPoint) {
          this.classList.add('show');
          this.dataset.bsPopper = 'none';

          // Update the .dropdown-toggle
          this.previousElementSibling.classList.add('show');
          this.previousElementSibling.ariaExpanded = true;
          this.previousElementSibling.dataset.bsToggle = null;
        }
      });

      // On mouse leave.
      _self.dropdownMenuItems[i].addEventListener('mouseleave', function () {
        if (_self.windowWidth >= _self.mobileBreakPoint) {
          this.classList.remove('show');
          this.dataset.bsPopper = null;

          // Update the .dropdown-toggle
          this.previousElementSibling.classList.remove('show');
          this.previousElementSibling.ariaExpanded = false;
          this.previousElementSibling.dataset.bsToggle = 'dropdown';
        }
      });
    }
   }
  }
 }

 const bootstrapOpenMenuHover = new BootstrapOpenMenuHover();

Bootstrap v4方案

这将允许您遵循顶级导航链接。

这是基于桌面和移动平台设计的。随意更改BREAK_POINT变量以满足您的需要:D。

jQuery

var WINDOW_WIDTH;
var BREAK_POINT = 991;

(function ($) {

    /** Set window width onload */
    WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
    /** Set window width if the browser is resized */
    $(window).resize(function () {
        WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
    });

    /** Dropdown menu on mouseenter */
    $(".nav-item.dropdown").on('mouseenter', function () {
        console.log("mouseenter");
        if (WINDOW_WIDTH >= BREAK_POINT) {
            // Open up the dropdown
            $(this).addClass('show'); // add the class show to the li parent
            $(this).children('.nav-link').removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
            $(this).children('.dropdown-menu').addClass('show'); // add the class show to the dropdown div sibling
        }
    });
    /** Dropdown menu on mouseleave */
    $(".nav-item.dropdown").on('mouseleave', function () {
        console.log("mouseleave");
        if (WINDOW_WIDTH >= BREAK_POINT) {
            // Close the dropdown
            $(this).removeClass('show'); // add the class show to the li parent
            $(this).children('.nav-link').attr('data-toggle', 'dropdown'); // remove the data-toggle attribute so we can click and follow link
            $(this).children('.dropdown-menu').removeClass('show'); // add the class show to the dropdown div sibling
        }
    });
});

CSS

@media(min-width:  768px) {
  .dropdown-menu {
    margin-top: 0; // fixes closing on slow mouse transition
  }
}