PureCSS scrollable horizontal menu z-index issue

Question

I am trying to fix this but i cant. I have purecss menu, horizontal scrollable menu (see demo http://purecss.io/menus/), but the submenus/children of depth 1 and 2 doesnt popup on hovering in FF and Safari. It is hiding under.

I have noticed that if i remove the pure-menu-scrollable, everything works fine but i want to use this class to make this as responsive menu.

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

The CSS from pure menu are imported from this file 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;
}

I tried setting higher z-index to 5 for pure-menu-children class but it is not working.

How do i fix this?

Can you make a [demo](http://jsfiddle.net) of the above? – m4n0 Sep 21 '15 at 14:20 — m4n0, Sep 21 '15 at 14:20
As an aside, shouldn't that `` tag be `
`?
– Michael McMullin Sep 21 '15 at 14:21 — Michael McMullin, Sep 21 '15 at 14:21

score 2 · Accepted Answer · edited May 23 '17 at 12:22

I think the problem is more to do with your overflow settings rather than z-index. If you add the following to your <head> section, see if it makes things any better:

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

However, if this works for you, you should try and rework the styles you have so that the !important rule can be removed. It looks like the class pure-menu-scrollable has its overflow settings applied in several places, and this should be cleaned up first.

Note that without a working demo, it's difficult to say if this is the full problem you're experiencing. The code snippet in your question seems to work with this change, but other elements might affect your own code.

Update
Officially, it looks like PureCSS doesn't support dropdowns with scrollable menus. I found a workaround though, involving one line of Javascript and some minor adjustments to your menu. First, change the surrounding <div> to the following:

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

I gave it an ID, and removed the pure-menu-scrollable class. Next, add this line of Javascript:

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

This seems to kick-start the touch events on the parent element (I got this tip from Nick H247's post on a similar issue).

Hope that helps!

It seems to work but the menu is not scrollable horizontally (it stretches the whole page wide). see a demo on how scrollable horizontal menu works http://purecss.io/menus/ — pbu, Sep 21 '15 at 15:56
OK, it does say on that page that *"Dropdown menus are not supported"* for scrollable menus. I'll have a look at it later to see if there's a workaround... — Michael McMullin, Sep 21 '15 at 16:03
@pbu I've updated the answer with a Javascript workaround. Let me know if it works out for you... — Michael McMullin, Sep 22 '15 at 15:25

PureCSS scrollable horizontal menu z-index issue

1 Answers1

Linked