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

Question

我想删除由 pure-menu-has-children、pure-menu-children 和 pure-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>

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