Question

我想解决这个问题，但我不能解决。我有purecss菜单，水平滚动菜单（见demo 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设置，应首先清理它。

请注意，如果没有工作演示，很难说这是否是您遇到的完整问题。您的问题中的代码段似乎与此更改有关，但其他元素可能会影响您自己的代码。

<强>更新
正式地说，看起来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可滚动水平菜单z-index问题

1 个答案: