jquery - 水平显示下拉菜单

Question

我正在尝试让我的下拉菜单链接水平显示而不是垂直显示。

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li>
            <a href="index.html">Home</a>
        </li>
        <li>
            <a href="about.html">About</a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products</a>
            <ul class="dropdown-menu">
                <ul class='list-inline'>
                    <li><a href="products1.html" id="">This is a product page</a>
                    </li>
                    <li><a href="products2.html" id="">This is also a product page</a>
                    </li>
                    <li><a href="#" id="">3</a>
                    </li>
                    <li><a href="#" id="">4</a>
                    </li>
                    <li><a href="#" id="">5</a>
                    </li>
                </ul>
            </ul>
        </li>
        <li>
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</div>

我正在使用一种标准 Bootstrap 模板。每个产品页面的标​​题都是几个单词，但现在那里的文字只是作为示例。

使用新的有目的的 CSS: proposed answer

Answer 1

这是 Codepen 上的一个快速的:http://codepen.io/anon/pen/dGZgOZ

您可以使用 display:table/-row/-cell强制水平下拉。

我修复了 <ul><ul>...</ul></ul> 所以 HTML 是有效的。

代码:

.nav {


list-style: none;
}
.nav > li {
  float: left;
}
.nav > li.dropdown:hover .dropdown-menu {
  display: table;
}
.nav > li .dropdown-menu {
  display: none;
  position: absolute;
  background: #ccc;
}
.nav > li .dropdown-menu .list-inline {
  display: table-row;
}
.nav > li .dropdown-menu .list-inline > li {
  display: table-cell;
  list-style: none;
}

编辑: 添加了 :hover