Foundation 6.4.1 - 如何将下拉菜单置于其父级之下？
领域
我正在尝试实现像本网站这样的下拉菜单，我可以在其中将下拉菜单居中：
这是我的工作代码，它远非完美：
.row,
.grid-container {
border: 1px solid blue;
}
.menu>li>a {
line-height: 40px;
}
.menu>li>a:hover {
border-bottom: 1px solid red;
}
.menu ul li a {
line-height: normal;
width: 100%;
text-align: center;
}
.menu ul li:hover {
background-color: #eee;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<ul class="menu align-center dropdown" data-dropdown-menu>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#">One One One One One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<script>
$(document).foundation();
</script>如您所见menu vertical，没有居中 - 只有文本居中。我怎样才能让它在其父项下居中？
另外，如何删除旁边的下拉箭头one？
或者我可以使用任何可定制的 CSS 插件来实现这个结果，而不是重新发明它，或者使用 Foundation（定制它是一个很大的挑战！）
安德鲁·克拉文
在当前样式规则之后添加这个 after 将摆脱箭头（如果在样式块中的正确规则声明之后无法获得它，您可以使用一个重要的，但我建议反对它）
.dropdown.menu > li.is-dropdown-submenu-parent > a::after{
content: none;
}
并且该站点使用动态计算的元素上的左值将其居中放置，您可以通过这样的方式实现您想要的效果
.dropdown.menu > li.opens-right > .is-dropdown-submenu{
margin-left: -65px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
移除 Foundation 6 下拉箭头
- 2
Foundation 6数据响应菜单参数
- 3
Foundation 6响应式菜单错误下拉/追溯
- 4
Foundation 6 Abide - 如何实现 formnovalidate
- 5
Foundation 4-响应式下拉菜单的选项卡
- 6
如何格式化“如果值1或4或6或10”
- 7
如何在JavaScript中[1,2] + [4,5,6] [1] = 1,25
- 8
ZURB Foundation 6的要求
- 9
Foundation 6-单击下拉列表项不会激活链接
- 10
单击后，Foundation 6画布菜单自动关闭
- 11
单击链接上显示了Foundation 6菜单图标
- 12
Foundation 6 Off Canvas，菜单内容应该放在哪里？
- 13
Foundation 6将scss文件应用于各个页面
- 14
如何在Foundation 6中接受十进制值
- 15
如何在Foundation 6中制作圆形按钮组？
- 16
Foundation 6 分页，如何对表格进行分页？
- 17
如何在Zurb Foundation下拉菜单中添加溢出？
- 18
Foundation 6.4.1 - 如何修复下拉菜单的宽度？
- 19
如何将动画SVG放置在Foundation 6元素后面？
- 20
如何使用张量流将 [1,2,3,4,5,6] 重塑为 [[1,3,5],[2,4,6]]？
- 21
vector <int> + = 1,1,2,2,2,3,4,5,6如何; 可能的？
- 22
Bootstrap 6-4-2-1列
- 23
Foundation 4的移动版式
- 24
带有关闭画布菜单的Foundation 4
- 25
将Foundation 5添加到Laravel 4
- 26
如何重复序列：r中的1,2,3,4,5,6,1,2,3,4,5,6,7,8,9,10,7,8,9,10
- 27
如何在R中将c（1,2,3）和c（4,5,6）连接到c（1,4,2,5,3,6）？
- 28
如何将Extjs应用程序从4升级到6？
- 29
如何使用带有Rails 4的Foundation紧密链接？
我来说两句