0

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

然而，当我开始创建菜单时，我发现了不需要的效果。

让我们从一个我无法以任何方式删除的三角形开始：

在此处输入图像描述

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 的了解几乎不存在。因此，如果有人可以帮助我使下拉菜单在鼠标上出现和消失，将为我节省大量时间。

我提前感谢所有帮助我的人，因为我在工作中没有帮助就被困住了

提前致谢

4

2 回答 2

0

这是一个几乎相同的问题，有很多答案......如何在悬停而不是点击时制作 twitter 引导菜单下拉菜单

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

于 2013-07-14T18:22:11.487 回答
0

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

.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

于 2013-07-15T07:07:56.573 回答