當屏幕尺寸下降到簾幕點以下時，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; 
      } 
     }