如何在5号基础上制作全宽子菜单

时间:2016-01-12 17:33:50

标签: html css zurb-foundation

我正在尝试将子菜单的宽度设为100%但不起作用。

如果有人能帮助我,我们将非常感激

http://codepen.io/maiterosalie/pen/OMgeeZ

<div class="row" id="menu">
    <div class="columns small-2">
      <a href="#" id="logo">
        <img src="http://indexrd.com/application/public/img/logo.svg" width="60" height="60" id="logo">
      </a>
    </div>
    <ul class="small-8 .small-offset-1 columns">
      <li><a class="trans active" href="#">Menu</a></li>
      <li>
        <a class="trans" id="servicios" href="#">Sub Menu</a>
        <ul class="submenu">
          <li><a class="trans" href="#">link #1</a></li>
          <li><a class="trans" href="#">link #2</a></li>
          <li><a class="trans" href="#">link #3</a></li>
          <li><a class="trans" href="#">link #4</a></li>
        </ul>
      </li>
      <li><a class="trans" href="#">Menu</a></li>
      <li><a class="trans" href="#">Menu</a></li>
    </ul>

1 个答案:

答案 0 :(得分:0)

您的div元素< div class="row" id="menu">未使用< / div>关闭。你需要这样,所以你的编码是正确的。 您也可以将style="width: 100%;"添加到顶级div课程,或者您希望自己的菜单看起来如此。 这是因为div元素是一个容器,您必须设置一个特定的宽度。所以无论你放入什么内容都可以扩展到你选择的百分比。 希望有所帮助。