引导程序中的下拉菜单

Question

我正在使用引导程序创建我的第一个网站。

但是，当我开始创建菜单时，却发现了不良的效果。

让我们从不能以任何方式删除的三角形开始：

HTML代码是：

<div class="navbar">
                <div class="navbar-inner">
                    <a class="brand" href="#">
                        <img src="img/logo.png" alt="Logo Impressive">
                    </a>
                    <ul class="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Sliders</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Pages
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li>Example</li>
                                <li>Example</li>
                                <li>Example</li>
                            </ul>
                        </li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Shortcodes</a></li>
                        <li><a href="#">Why Me ?</a></li>
                    </ul>
                </div> <!-- end navbar-inner -->
            </div> <!-- end navbar -->

在创建自动关闭效果时，我发现了另一个问题。

绝对对任何人都容易，但是我对jquery的了解几乎不存在。 因此，如果有人可以帮助我使下拉菜单在鼠标上出现和消失，则可以节省很多时间。

我预先感谢所有会帮助我的人，因为我在工作中无所适从

提前致谢

Answer 1

这是一个几乎相同的问题，有很多答案... 如何在悬停而不是单击上使Twitter Bootstrap菜单下拉菜单

希望这对选择使用Bootstrap有所帮助和荣誉。 以我的经验，您不会失望的。

Answer 2

要删除三角形，请像这样在导航栏dropdown-menu覆盖:before和:after伪选择器。

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

激活鼠标悬停（悬停）下拉菜单的操作如下：

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

Bootply演示http://www.bootply.com/66576