Zurb基金会顶栏下拉菜单无效

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Welcome</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">Hello, User</a>
        <ul class="dropdown">
          <li><a href="#">Settings</a></li>
          <li class="active"><a href="#">Log Out</a></li>
        </ul>
      </li>
    </ul>

  </section>
</nav>

I have two issues.

我有两个问题。

1. The dropdown doesn't work in full screen. Hovering/clicking 'Hello, User!' doesn't do anything for me. When I inspect element, it seems like the drop down is given -100% positioning.
2. 下拉列表无法全屏显示。徘徊/点击“你好，用户！”对我没有任何帮助。当我检查元素时，看起来下拉的定位为-100％。

section class="top-bar-section" style="left: -100%;

section class =“top-bar-section”style =“left：-100％;

2.When I resize my screen, the menu text and icon shows up, but 'Hello, User' appears below it instead of appearing only when you click Menu. Clicking menu does nothing.

2.当我调整屏幕大小时，会显示菜单文本和图标，但“Hello，User”会出现在其下方，而不是仅在您单击“菜单”时显示。单击菜单不执行任何操作。

Any help will be appreciated!

任何帮助将不胜感激！

1 个解决方案

#1

Your foundation code is 100% correct. It looks as if you are missing the JQuery that the dropdown depends on or it is not firing correctly. Please look into that and if you still have issues post your entire page of code including head tags.

您的基础代码100％正确。看起来好像你错过了下拉列表依赖的JQuery，或者它没有正确触发。请仔细研究一下，如果您的整个代码页（包括头标记）仍有问题。