PureCSS 可滚动水平菜单 z-index 问题答案

【问题标题】：PureCSS scrollable horizontal menu z-index issuePureCSS 可滚动水平菜单 z-index 问题
【发布时间】：2015-12-15 18:48:26
【问题描述】：

我正在尝试解决此问题，但我不能。我有 purecss 菜单、水平滚动菜单（参见演示 http://purecss.io/menus/），但在 FF 和 Safari 中悬停时不会弹出深度 1 和 2 的子菜单/子菜单。它藏在下面。

我注意到，如果我删除纯菜单可滚动，一切正常，但我想使用这个类来使其成为响应式菜单。

<navi>
  <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable"><ul id="menu-top" class="pure-menu-list"><li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-10 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/">Home</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/arts/">Arts</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-12 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/business/">Business</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/computers/">Computers</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/sample-page/">Sample Page</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children pure-menu-item pure-menu-has-children pure-menu-allow-hover menu-item-14 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/fashion/">Fashion</a>
<ul class="sub-menu pure-menu-children menu-odd  menu-depth-1">
    <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children pure-menu-item pure-menu-has-children pure-menu-allow-hover menu-item-26 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/sports/">Sports</a>
    <ul class="sub-menu pure-menu-children menu-even sub-sub-menu menu-depth-2">
        <li id="menu-item-25" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/real-estate/">Real Estate</a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/india/">India</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/real-estate/">Real Estate</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-17 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/sports/">Sports</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/technology/">Technology</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/real-estate/">Real Estate</a></li>
<li id="menu-item-1712" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1712 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/sample-page/">Sample Page</a></li>
<li id="menu-item-1713" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1713 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/page-b/">Page B</a></li>
<li id="menu-item-1714" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1714 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/page-a/">Page A</a></li>
<li id="menu-item-1715" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1715 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/blog/">Blog</a></li>
</ul></div></navi>

纯菜单中的 CSS 是从此文件 http://yui.yahooapis.com/pure/0.6.0/pure-min.css 导入的

.pure-menu {
    box-sizing: border-box;
}
.pure-menu-fixed {
    left: 0;
    position: fixed;
    top: 0;
    z-index: 3;
}
.pure-menu-list, .pure-menu-item {
    position: relative;
}
.pure-menu-list {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.pure-menu-item {
    height: 100%;
    margin: 0;
    padding: 0;
}
.pure-menu-link, .pure-menu-heading {
    display: block;
    text-decoration: none;
    white-space: nowrap;
}
.pure-menu-horizontal {
    white-space: nowrap;
    width: 100%;
}
.pure-menu-horizontal .pure-menu-list {
    display: inline-block;
}
.pure-menu-horizontal .pure-menu-item, .pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-separator {
    display: inline-block;
    vertical-align: middle;
}
.pure-menu-item .pure-menu-item {
    display: block;
}
.pure-menu-children {
    display: none;
    left: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    z-index: 3;
}
.pure-menu-horizontal .pure-menu-children {
    left: 0;
    top: auto;
    width: inherit;
}
.pure-menu-allow-hover:hover > .pure-menu-children, .pure-menu-active > .pure-menu-children {
    display: block;
    position: absolute;
}
.pure-menu-has-children > .pure-menu-link::after {
    content: "▸";
    font-size: small;
    padding-left: 0.5em;
}
.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link::after {
    content: "▾";
}
.pure-menu-scrollable {
    overflow-x: hidden;
    overflow-y: scroll;
}
.pure-menu-scrollable .pure-menu-list {
    display: block;
}
.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
    display: inline-block;
}
.pure-menu-horizontal.pure-menu-scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5em 0;
    white-space: nowrap;
}
.pure-menu-separator {
    background-color: #ccc;
    height: 1px;
    margin: 0.3em 0;
}
.pure-menu-horizontal .pure-menu-separator {
    height: 1.3em;
    margin: 0 0.3em;
    width: 1px;
}
.pure-menu-heading {
    color: #565d64;
    text-transform: uppercase;
}
.pure-menu-link {
    color: #777;
}
.pure-menu-children {
    background-color: #fff;
}
.pure-menu-link, .pure-menu-disabled, .pure-menu-heading {
    padding: 0.5em 1em;
}
.pure-menu-disabled {
    opacity: 0.5;
}
.pure-menu-disabled .pure-menu-link:hover {
    background-color: transparent;
}
.pure-menu-active > .pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus {
    background-color: #eee;
}
.pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited {
    color: #000;
}

我尝试将 pure-menu-children 类的更高 z-index 设置为 5，但它不起作用。

我该如何解决这个问题？

【问题讨论】：

你能在上面做一个demo吗？
顺便说一句，<navi> 标签不应该是<nav>吗？

标签： html css

【解决方案1】：

我认为问题更多与您的overflow 设置有关，而不是z-index。如果您将以下内容添加到您的 <head> 部分，看看它是否会让事情变得更好：

<style>
.pure-menu-scrollable {
    overflow-x: visible !important;
    overflow-y: visible !important;
}
</style>

但是，如果这对您有用，您应该尝试重新设计您拥有的样式，以便可以删除 !important 规则。看起来pure-menu-scrollable 类的overflow 设置应用于多个地方，这应该首先清理。

请注意，如果没有可用的演示，很难说这是否是您遇到的全部问题。您问题中的代码 sn-p 似乎适用于此更改，但其他元素可能会影响您自己的代码。

更新
正式地，看起来 PureCSS 不支持带有可滚动菜单的下拉菜单。不过，我找到了一种解决方法，涉及一行 Javascript 和对菜单的一些小调整。首先，把周围的<div>改成如下：

<div id="scrollmenu" class="pure-menu pure-menu-horizontal">

我给了它一个 ID，并删除了 pure-menu-scrollable 类。接下来，添加这行 Javascript：

<script type="text/javascript">
    document.getElementById('scrollmenu').addEventListener('touchstart', function(event){});
</script>

这似乎启动了父元素上的触摸事件（我从Nick H247's post 得到了关于类似问题的提示）。

希望有帮助！

【讨论】：

它似乎可以工作，但菜单不能水平滚动（它会拉伸整个页面）。观看有关可滚动水平菜单如何工作的演示 purecss.io/menus
好的，在那个页面上确实说 “不支持下拉菜单” 用于可滚动菜单。稍后我会看看它是否有解决方法......
那真的很有帮助。 :J
@pbu 我已经用 Javascript 解决方法更新了答案。让我知道它是否适合你...