我正在使用bootstrap创建响应式网站。
当浏览器窗口变窄时,列应该会崩溃。
问题是,当我点击标题时,我想要显示下拉列表。
我已将菜单定位为绝对,因此我可以将z-index置于上方。
全宽,看起来很好:
当列堆叠时,菜单被推到左侧
如何将菜单放在居中的菜单标题文本下方?我能想到的一种方法是将下拉菜单的位置设置为标题文本的x y
位置。这是唯一的方法吗?
<div class="col-md-1">
<div id="heading_practice">
<a href="#">
<h4>Practice Areas</h4>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
<div class="col-md-1">
<div id="heading_about">
<a href="#">
<h4>About Us</h4>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
<p>test3</p>
</div>
</div>
</div>
CSS
/*Menu*/
#home, #heading_practice, #heading_about, #heading_contact {
position: relative;
text-align:center;
}
.menu_practice, .menu_about, .menu_contact {
position: absolute;
padding: 10px;
border: thin solid Silver;
background: rgba(0, 0, 0, 0.9);
color: white;
z-index: 1;
margin-left:20px;
text-align:left;
}
答案 0 :(得分:2)
如果您正在使用Bootstrap,那么为什么不使用Bootstrap-Dropdowns?
http://getbootstrap.com/components/#dropdowns
看起来你似乎正在那里建立一个导航栏,Bootstrap已经集成了以及对Dropdown的良好工作支持: