水平显示下拉菜单

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>

我正在使用标准引导模板之一。 每个产品页面的标​​题都是几个单词，但此处的文本仅作为示例。

使用新的CSS： 建议的答案

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

Answer 2

添加CSS

.navbar-nav{margin:0; padding:0; list-style:none;}
.navbar-nav li{float: left;
    position: relative;
    margin-right: 30px;}
.list-inline{    position: absolute;
    width: 205px;
    list-style: none;
    padding: 0;
    margin: 0;}
 .list-inline li{
          display: inline-block;
    list-style: none;
    }

https://jsfiddle.net/vmwj5w4L/3/