Css ZURB基金会调整顶杆下拉高度

我已将_topbar.scss内的topbar高度调整为76，但这似乎也会影响下拉列表

// Height and margin
$topbar-height: rem-calc(76) !default;

我将430左右的内容改为以下内容，这减少了下拉列表的高度，但随后将顶部边距从菜单中推出

      // Styling elements inside of dropdowns
  .dropdown {
    padding: 0;
    position: absolute;
    #{$default-float}: 100%;
    top: 0;
    z-index: 99;
    @include topbar-hide-dropdown();

    li {
      width: 100%;
      height: $topbar-height/2;

      a {
        font-weight: $topbar-dropdown-link-weight;
        padding: 8px $topbar-link-padding;
        &.parent-link {
          font-weight: $topbar-link-weight;
        }
      }

---

当您检查下拉列表的HTML代码时，您会发现菜单的标题和项目呈现在相同的

ul

（由javascript修改）中，例如：

<ul class="dropdown">
<li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
<li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul> 

（在您的情况下，您应该将上述代码放在

\u topbar.scss

的末尾）

重新编译代码后，现在的下拉列表应如下所示：

最后，你应该注意到编辑<代码> I.TopBar。SCSS在大多数情况下是不好的做法，因为这样做使你不能更新基础。您应该创建一个

app.scss

并编译该文件：

@import "settings";
@import "foundation";

.top-bar ul.dropdown li:nth-child(n+2) a, 
.top-bar ul.dropdown li.active:nth-child(n+2) a {
line-height: rem-calc(45);
}

以及您的（自定义）

\u setttings.scss

：

$topbar-height: rem-calc(90);

---

也许弄清楚你到底想发生什么会有所帮助。该图像显示菜单

li

s相互重叠？

$topbar-height: rem-calc(90);