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

Answer 2

添加css

git push -u origin my-new-branch:my-new-branch

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

水平显示下拉菜单

2 个答案: