我如何 create/fix 移动响应式浏览的垂直导航选项卡？

Question

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

的意思

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

这是我的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: "[=12=]0020[=12=]25BE";
    }

非常感谢您能提供给我的任何帮助和反馈！

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: "[=11=]0020[=11=]25BE";
  }
}

<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>

我如何 create/fix 移动响应式浏览的垂直导航选项卡？

How can I create/fix vertical navigation tabs for mobile responsive browsing?

html

css

navigation

responsive