0

によって設定された動作を削除し、pure-menu-has-children画面サイズがカーテン ポイントを下回ったとき。pure-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>

4

1 に答える 1

0

解決策は最小化されていないファイルにありました

        @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;
            }
        }
于 2015-12-03T20:56:24.670 に答える