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類設置應用在幾個地方，這應該首先清理。

請注意，如果沒有工作演示，很難說這是否是您遇到的完整問題。您的問題中的代碼片段似乎適用於此更改，但其他元素可能會影響您自己的代碼。

更新
據官方統計，它看起來像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）。

希望有幫助！