Question

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

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

这是我的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: "\000020\0025BE";
    }

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

Answer 1

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

尝试添加以下内容：

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

这允许li元素包含a元素，包括边距，因此当它们被鼠标悬停时，:hover状态仍然存在。

＆＃13;

@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: "\000020\0025BE";
  }
}

＆＃13;

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

＆＃13;

如何为移动设备响应式浏览创建/修复垂直导航标签？

1 个答案: