css - YUI Purecss remove multi level menu behavior when the screen size drops below a curtain point

Question

I want to remove the behavior set by pure-menu-has-children, pure-menu-children and pure-menu-allow-hover when the screen size drops below a curtain point.

I have tried to reset them with the follow code and it works partially but when I hover a sub menu the menu collapses again.

View in full page mode and make the browser smaller.

Updated

Now it works

@import url('http://yui.yahooapis.com/pure/0.6.0/pure-min.css');
        @media screen and (max-width: 35.5em){
            .pure-menu-children {
                display: block;
                position: relative;
                left: 0%;
                top: 0;
                margin: 0;
                padding: 0;
                z-index: 3;
            }
            .pure-menu-allow-hover:hover > .pure-menu-children,
            .pure-menu-active > .pure-menu-children {
                display: block;
                position: relative;
            }
        }
#show-my-issue{background: gold}

<div id="nav" class="pure-u-1 pure-u-sm-1-4 pure-u-lg-1-6 pure-u-xl-1-8 pure-menu">
  <ul class="pure-menu-list">

    <li><a class="pure-menu-link" title="Home" href="#">Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"><a href="#" id="menuLink1" class="pure-menu-link">Sub Menu</a>
      <ul class="pure-menu-children">
        <li><a class="pure-menu-link" title="New File" href="#">New File</a>
        </li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"><a href="#" id="menuLink1" class="pure-menu-link">Sub Sub Menu</a>
          <ul class="pure-menu-children">
            <li><a class="pure-menu-link" title="New File" href="#">New File</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

  </ul>
</div>
<div id='show-my-issue'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue augue, accumsan sollicitudin congue ac, feugiat ac eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>

Answer 1

解决方案在未最小化的文件中

        @media screen and (max-width: 35.5em){
            .pure-menu-children {
                display: block;
                position: relative;
                left: 0%;
                top: 0;
                margin: 0;
                padding: 0;
                z-index: 3;
            }
            .pure-menu-allow-hover:hover > .pure-menu-children,
            .pure-menu-active > .pure-menu-children {
                display: block;
                position: relative;
            }
        }