如何创建/修复用于移动响应式浏览的垂直导航选项卡

Question

我不知道如何在标题的简单问题中真正解释这一点，但我有一个示例页面向您展示我的意思 http://www.yenrac.net/test

如您所见，我在下拉菜单方面遇到了问题。每当我将鼠标悬停在下拉菜单"手风琴"中的下一个类别时，如果他们的浏览器在一个小窗口中，它会跳回并拧紧桌面光标.另一件事是移动用户不能再次单击框链接来关闭下拉列表，这是我想解决的其他问题。有人可以看看这个并帮助我弄清楚我做错了什么吗？

这是我的 HTML：http://pastebin.com/RkFs97wH

    <nav>
  <ul id="navigation">
    <li><a id="current" href="index.html">Home</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a class="dropdown" href="#">Dropdown</a>
      <ul>
        <li>
          <a class="pullout" href="#">Pullout Tab</a>
          <ul>
            <li><a href="#">Tier 3 Tab</a></li>
          </ul>
        </li>
        <li>
          <a class="pullout" href="#">Pullout Tab 2</a>
          <ul>
            <li><a href="#">Tier 3 Tab</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Servers</a></li>
    <li id="last"><a href="#">Contact Us</a></li>
  </ul>
</nav>

这是我的 CSS：http://pastebin.com/ttYh0Qz6

/* Set to very large range just for convenience of testing */
    @media screen and (max-width: 10000px) {
    #postdatemeta {
        visibility: visible;
    }
    .postdate {
      visibility: hidden;
    }
    nav ul {
      list-style-type: none;
      margin: 0 auto;;
      padding: 0;
      width: 98%;
    }
    nav li a {
      display: block;
      color: #fff;
      padding: 1em 0;
      margin: 0.3em auto;;
      text-decoration: none;
      text-align: center;
      background: #000;
    }
    nav ul ul {
      position: absolute;
      visibility:hidden;
    }
    nav ul li:hover > ul {
      visibility: visible;
      position: relative;
    }
    nav ul ul li a {
      background: #999;
    }
    .pullout:after {
      content: "00020025BE";
    }

感谢您为我提供的任何帮助和反馈！

Answer 1

您正在向a元素添加margin，但父项li当前忽略这些边距，因此当您将鼠标悬停在边距上时，它会识别出您正在将鼠标移离li，因此:hover状态消失，导致菜单折叠。

尝试添加以下内容：

nav li {
  width: 100%;
  display: inline-block;
}

这允许li元素包装a元素（包括边距），因此当它们被鼠标悬停在上面时，:hover状态保持不变。

@media screen and (max-width: 10000px) {
  nav ul {
    list-style-type: none;
    margin: 0 auto;
    ;
    padding: 0;
    width: 98%;
  }
  nav li {
    width: 100%;
    display: inline-block;
  }
  nav li a {
    display: block;
    color: #fff;
    padding: 1em 0;
    margin: 0.3em auto;
    ;
    text-decoration: none;
    text-align: center;
    background: #000;
  }
  nav ul ul {
    position: absolute;
    visibility: hidden;
  }
  nav ul li:hover > ul {
    visibility: visible;
    position: relative;
  }
  nav ul ul li a {
    background: #999;
  }
  .pullout:after {
    content: "00020025BE";
  }
}

<nav>
  <ul id="navigation">
    <li><a id="current" href="index.html">Home</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
    <li><a class="dropdown" href="#">Dropdown</a>
      <ul>
        <li>
          <a class="pullout" href="#">Pullout Tab</a>
          <ul>
            <li><a href="#">Tier 3 Tab</a>
            </li>
          </ul>
        </li>
        <li>
          <a class="pullout" href="#">Pullout Tab 2</a>
          <ul>
            <li><a href="#">Tier 3 Tab</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Servers</a>
    </li>
    <li id="last"><a href="#">Contact Us</a>
    </li>
  </ul>
</nav>