title: PureCSS scrollable horizontal menu z-index issue
body: <p>I am trying to fix this but i cant. I have purecss menu, horizontal scrollable menu (see demo <a href="http://purecss.io/menus/" rel="nofollow noreferrer">http://purecss.io/menus/</a>), but the submenus/children of depth 1 and 2 doesnt popup on hovering in FF and Safari. It is hiding under. </p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/SIuki.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SIuki.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;navi&gt;
    &lt;!-- Menu toggle --&gt;
      &lt;a href="#menu" id="menuLink" class="menu-link"&gt;
  &lt;div class="pure-menu pure-menu-horizontal pure-menu-scrollable"&gt;&lt;ul id="menu-top" class="pure-menu-list"&gt;&lt;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"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-11" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/arts/"&gt;Arts&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-12 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/business/"&gt;Business&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/computers/"&gt;Computers&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/sample-page/"&gt;Sample Page&lt;/a&gt;&lt;/li&gt;
  &lt;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"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/fashion/"&gt;Fashion&lt;/a&gt;
  &lt;ul class="sub-menu pure-menu-children menu-odd  menu-depth-1"&gt;
      &lt;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"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/sports/"&gt;Sports&lt;/a&gt;
      &lt;ul class="sub-menu pure-menu-children menu-even sub-sub-menu menu-depth-2"&gt;
          &lt;li id="menu-item-25" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/real-estate/"&gt;Real Estate&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/india/"&gt;India&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-16" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/real-estate/"&gt;Real Estate&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-17" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-17 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/sports/"&gt;Sports&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/technology/"&gt;Technology&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-22" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/category/real-estate/"&gt;Real Estate&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-1712" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1712 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/sample-page/"&gt;Sample Page&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-1713" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1713 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/page-b/"&gt;Page B&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-1714" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1714 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/page-a/"&gt;Page A&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-1715" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1715 pure-menu-item"&gt;&lt;a class="pure-menu-link" href="http://localhost/wp/index.php/blog/"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;&lt;/navi&gt;
  </code></pre>
  
  <p>The CSS from pure menu are imported from this file <a href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="nofollow noreferrer">http://yui.yahooapis.com/pure/0.6.0/pure-min.css</a></p>
  
  <pre><code>.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 &gt; .pure-menu-children, .pure-menu-active &gt; .pure-menu-children {
      display: block;
      position: absolute;
  }
  .pure-menu-has-children &gt; .pure-menu-link::after {
      content: "▸";
      font-size: small;
      padding-left: 0.5em;
  }
  .pure-menu-horizontal .pure-menu-has-children &gt; .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 &gt; .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;
  }
  </code></pre>
  
  <p>I tried setting higher z-index to 5 for <code>pure-menu-children</code> class but it is not working. </p>
  
  <p>How do i fix this?</p>