[英]Display dropdown menu horizontally
I am trying to get my drop down menu links to display horizontally instead of vertically. 我正在尝试使下拉菜单链接水平显示而不是垂直显示。
<!-- 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>
I am using one of the standard bootstrap templates. 我正在使用标准引导模板之一。 The title for each product page are a few words but the text in there now is just as an example.
每个产品页面的标题都是几个单词,但此处的文本仅作为示例。
With new purposed css: proposed answer 使用新的CSS: 建议的答案
Here a fast one on Codepen: http://codepen.io/anon/pen/dGZgOZ 这是Codepen上的一个快速入门: http ://codepen.io/anon/pen/dGZgOZ
You can use the display:table/-row/-cell
to force the dropdown horizontal. 您可以使用
display:table/-row/-cell
强制下拉水平。
And I fixed the <ul><ul>...</ul></ul>
so the HTML is valid. 并且我修复了
<ul><ul>...</ul></ul>
以便HTML有效。
Code: 码:
.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;
}
Edit: added :hover
编辑:添加
:hover
add css 添加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/ https://jsfiddle.net/vmwj5w4L/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.