css - 基金会 : vertical sub-nav

Question

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

编辑:这里是基础文档的链接: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; 
}

Answer 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" ... >小宽度为垂直，中等宽度为水平。我希望这有帮助。