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

Question

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

我注意到，如果我删除纯菜单滚动，一切正常，但我想使用此类将其作为响应式菜单。

<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，但它不起作用。

我该如何解决这个问题？

Answer 1

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

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

但是，如果这对您有用，您应该尝试修改您的样式，以便 !important可以删除规则。它看起来像类 pure-menu-scrollable有它的overflow设置应用在几个地方，这应该首先清理。

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

更新
从官方 Angular 来看，PureCSS 似乎不支持带有可滚动菜单的下拉菜单。不过，我找到了一个解决方法，包括一行 Javascript 和对菜单的一些小调整。首先，改变周围<div>到以下内容:

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

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

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

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

希望对您有所帮助!