当屏幕尺寸低于窗帘点时,YUI Purecss 移除多级菜单行为

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

我想删除 pure-menu-has-childrenpure-menu-childrenpure-menu-allow-hover 设置的当屏幕尺寸低于窗帘点时的行为。

我尝试使用以下代码重置它们,它部分起作用,但是当我将鼠标悬停在子菜单上时,菜单再次折叠。

以全页模式查看并缩小浏览器。

已更新

现在可以了

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

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

        @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;
            }
        }