将鼠标悬停在Twitter Bootstrap中的下拉菜单中

Question

如何编写代码,当您将鼠标悬停在使用Twitter Bootstrap 3实现的下拉菜单上时,下拉菜单会显示,用户可以点击展开的下拉菜单的链接？

我写了以下HTML:

        <nav>
            <ul id="mainMenu">
                <li><a href="/">Home</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown">Blog<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/1">1</a></li>
                        <li><a href="/2">2</a></li>
                    </ul>
                </div>
                </li>

            </ul>
        </nav>

以下CSS:

ul#mainMenu li {
    display: inline-block;
    padding: 3px;
    background-color: orange;
    border-radius: 5px;
    -webkit-transform: skewX(-6deg);
}

ul#mainMenu li:hover {
    background-color: green;
}

但是,当您将鼠标悬停Blog在下拉菜单中的菜单上时,下拉菜单不会展开,但如果单击它,菜单会展开.

即使你扩展菜单,扩展菜单在布局上也是可怜的,因为扩展菜单中有多余的空白区域,可能是因为我在某种程度上倾斜了(-6deg).

此外,展开的菜单水平放置,而不是垂直放置.我不知道它为什么水平放置,但我能解决它吗？

谢谢.

[更新]由于某些原因,HTML代码无法正确显示.现在我必须检查如何解决它,如果我知道如何解决它,我会做.我在<pre><code>标签中写了这些信息.

Answer 1

花了一段时间找到它.令人惊讶的是,如果你在谷歌周围,很多人发布无法复杂的东西是行不通的!这个简单的CSS对我有用,虽然我无法保证它在小型设备上的表现.

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