基础：垂直子导航答案

【问题标题】：Foundation: vertical sub-nav基础：垂直子导航
【发布时间】：2016-04-01 10:51:28
【问题描述】：

是否可以制作垂直子导航？在文档页面中只有水平的，我不知道如何垂直显示元素

编辑：这里是基础文档的链接：http://foundation.zurb.com/docs/components/subnav.html

这是原始css（从foundation.css中提取）：

.sub-nav 
{
    display: block;
    width: auto;
    overflow: hidden;
    margin: -0.25rem 0 1.125rem;
    padding-top: 0.25rem;
    margin-right: 0;
    margin-left: -0.75rem; 
}

.sub-nav dt 
{
    text-transform: uppercase; 
}

.sub-nav dt,
.sub-nav dd,
.sub-nav li 
{
    float: left;
    display: inline;
    margin-left: 1rem;
    margin-bottom: 0.625rem;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 0.875rem;
    color: #999999; 
}

.sub-nav dt a,
.sub-nav dd a,
.sub-nav li a 
{
    text-decoration: none;
    color: #999999;
    padding: 0.1875rem 1rem; 
}

.sub-nav dt a:hover,
.sub-nav dd a:hover,
.sub-nav li a:hover 
{
    color: #737373; 
}

.sub-nav dt.active a,
.sub-nav dd.active a,
.sub-nav li.active a 
{
    border-radius: 3px;
    font-weight: normal;
    background: #008cba;
    padding: 0.1875rem 1rem;
    cursor: default;
    color: white; 
}

.sub-nav dt.active a:hover,
.sub-nav dd.active a:hover,
.sub-nav li.active a:hover 
{
    background: #0078a0; 
}

【问题讨论】：

无代码，无示例，无文档链接。到目前为止，您尝试过什么？
我试图修改原来的基础css并覆盖我的css文件中的sub-nav类，但到目前为止我还没有达到我的目标
因此，请向我们展示您目前拥有的东西，我们可以为您指明正确的方向。制作一个 JSfiddle.net 演示

标签： css zurb-foundation

【解决方案1】：

在 html 中分配“垂直”类，如下所示：

<ul class="vertical menu">
    <li><a href="oranges.html">Oranges</a></li>
    <li><a href="#">Limes</a></li>
    <li><a href="#">Lemons</a></li>
</ul>

仅使用垂直默认小。例如<ul class="vertical medium-horizontal menu" ... > 将是垂直的小宽度和水平的中等宽度。我希望这有帮助。

【讨论】：