レスポンスに設定されたとき、他のli要素を介して表示されるnavbarのドロップダウン部分

Question

私はナビバーを反応的にしようとしています。これまでのところ、画面が小さくなると、下のすべてのアイテムを表示することができました。しかし、私のnavbarのいくつかのliは通常落ちるサブアイテムを持っています（Classesには3つのsub liがあります）。副題を持つliの1つをホバリングすると、nav barの主なアイテムにレンダリングされます。

私が望むのは、ユーザーが画面をタップしたときだけ、サブメニューがホバリングによってトリガーされないことです。その後、親liの下にあるサブメニュー項目を表示し、次に他の主要liを続行する必要があります。

下のコードは、フルスクリーンのナビゲーションバーの作業部分です。

Demo

.nav a { 
text-decoration: none; 
color: #fff; 
display: inline-block; 
padding-left: 15px; 
padding-right: 15px; 
border-bottom: none; 
transition: .5s background-color; 
} 

.nav ul { 
list-style: none; 
background-color: #522d54; 
text-align: center; 
padding: 0; 
margin: 0; 
display: block; 
} 

.nav li { 
font-family: 'Allerta', Helvetica, Arial, sans-serif; 
width: auto; 
line-height: 40px; 
border-bottom: none; 
font-size: 1em; 
display: inline-block; 
text-align: left; 
} 

.nav a:hover { 
background-color: #39203b; 
} 

.nav a.active { 
cursor: default; 
background-color: #824885; 
box-shadow: inset 0em -.2em #b084b3; 
} 

.nav ul li { 
position: relative; 
display: inline-block; 
} 

.nav ul li ul li { 
text-align: center; 
padding: 0; 
width: 100%; 
} 

.nav li ul li a { 
text-align: left; 
font-size: .8em; 
white-space: nowrap; 
padding-left: 15px; 
padding-right: 15px; 
display: block; 
} 

.nav ul li ul { 
position: absolute; 
display: none; 
width: inherit; 
} 

.nav li:hover ul { 
display: inline-block; 
} 

Answer 1

あなたは、もはやそれはホバーに表示したいので、なしであなたのホバー表示を上書きしないようにする必要があります。

@media screen and (max-width: 650px) { 
    .nav li:hover ul { 
    display: none; 
    } 
} 

その後、あなたはクリックで李にクラスを追加するjavascriptやjqueryのを使用する必要があります：

jQueryのようなものかもしれない（あなたは、サブメニューを持つ項目のクラス「サブ」を持っていると仮定し）：

$('.nav li.sub').click(function() { 
    $(this).toggleClass('open-sub-menu'); 
}); 

新しいクラスは次のとおりです。

.nav li.sub.open-sub-menu ul { 
    position:relative; 
    display:block; 
} 

Answer 2

はあなたに本当にトリックをしたことをそんなにありがとう。私は完全なjquery/js noobですので、これは非常に役に立ちました。何とか私はheadタグのjqueryにリンクしていなかったことを理解するのに15分かかりました。

私の場合と同じ問題を抱える人には、HTMLのタグの間にこれを入れてください。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>