ナビゲーションバーをクリックしてリストアイテムを非表示にする

Question

モバイルデバイス用のナビゲーションバー領域外をクリックしたときに、ナビゲーションバーの項目を再び隠す方法がわかりません。 iOSやAndroidなどのモバイルデバイスではそのまま使用できます。ナビゲーションバーのCodePenはhttps://codepen.io/Macast/pen/ooKqpxです。どんな助けでも大歓迎です！ありがとうございました。

HTML：

<nav> 
    <div id="logo"> 
    <img src="images/J.-Freeman-&-Son-Landscape-Logo.png"> 
    </div> 

    <label for="drop" class="toggle">Menu</label> 
    <input type="checkbox" id="drop" /> 
    <ul class="menu"> 
    <li><a href="home.html">Home</a></li> 
    <li> 
     <!-- First Tier Drop Down --> 
     <label for="drop-1" class="toggle">About Us +</label> 
     <a href="#">About Us</a> 
     <input type="checkbox" id="drop-1" /> 
     <ul> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Our Services</a></li> 
     <li><a href="#">Our Aim</a></li> 
     </ul> 

    </li> 
    <li> 
     <!-- First Tier Drop Down --> 
     <label for="drop-2" class="toggle">Useful Information +</label> 
     <a href="#">Useful Information</a> 
     <input type="checkbox" id="drop-2" /> 
     <ul> 
     <li><a href="html/usefulInfo/arrangingTheFuneral.html">Arranging the Funeral</a></li> 
     <li><a href="html/usefulInfo/funeralCosts.html">Help with Funeral Costs</a></li> 
     <li><a href="html/usefulInfo/timesOfBereavement.html">In Times of Bereavement</a></li> 
     <li><a href="html/usefulInfo/howToRegisterDeath.html">How to Register a Death</a></li> 
     <li><a href="html/usefulInfo/peopleToContact.html">People You May Need to Contact</a></li> 
     <li><a href="html/usefulInfo/obtainProbate.html">How to Obtain Probate</a></li> 
     <li><a href="html/usefulInfo/funeralService.html">The Funeral Service</a></li> 
     <li><a href="html/usefulInfo/afterFuneralService.html">After the Funeral Service</a></li> 
     </ul> 
    </li> 
    <li><a href="html/contact.html">Contact</a></li> 
    </ul> 
</nav> 

はCSS：

.toggle, 
[id^="drop"] { 
    display: none; 
} 
/* Giving a background-color to the nav container. */ 

nav { 
    margin: 0; 
    padding: 0; 
    background-color: #254441; 
} 
/* Since we'll have the "ul li" "float:left" 
* we need to add a clear after the container. */ 

nav:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
/* Removing padding, margin and "list-style" from the "ul", 
* and adding "position:reltive" */ 

nav ul { 
    /*float: right;*/ 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    position: relative; 
} 
/* Positioning the navigation items inline */ 

nav ul li { 
    margin: 0px; 
    display: inline-block; 
    background-color: #254441; 
    text-align: center; 
    position: relative; 
    z-index: 200; /* Link items will stay above all over content, including Google Map */ 
} 
/* Styling the links */ 

nav a { 
    display: block; 
    padding: 14px 20px; 
    color: #fff; 
    font-size: 17px; 
    text-decoration: none; 
    text-align: center; 
} 
nav ul li ul li:hover { 
    background: #000000; 
} 
/* Background color change on Hover */ 

nav a:hover { 
    background-color: #000000; 
} 
/* Hide Dropdowns by Default 
* and giving it a position of absolute */ 

nav ul ul { 
    display: none; 
    position: absolute; 
    /* has to be the same number as the "line-height" of "nav a" */ 
    top: 60px; 
    left: 0; 
    right: 0; 
} 
/* Display Dropdowns on Hover */ 

nav ul li:hover > ul { 
    display: inherit; 
} 
/* Fisrt Tier Dropdown */ 

nav ul ul li { 
    /*width: 170px;*/ 
    float: none; 
    display: list-item; 
    position: relative; 
    text-align: center; 
} 
/* Second, Third and more Tiers 
* We move the 2nd and 3rd etc tier dropdowns to the left 
* by the amount of the width of the first tier. 
*/ 

nav ul ul ul li { 
    position: relative; 
    top: -60px; 
    /* has to be the same number as the "width" of "nav ul ul li" */ 

    left: 200px; 
} 
/* Change ' +' in order to change the Dropdown symbol */ 

li > a:after { 
    content: " +"; 
} 
li > a:only-child:after { 
    content: ""; 
} 

Answer 1

の両方を使用してみてください：フォーカスを：ホバーと。フォーカスは、モバイルユーザがナビゲーションバーにタッチしてコンテンツを表示し、ナビゲーションバーをタッチしてコンテンツを非表示にすることを可能にする。ただし、デスクトップユーザーのホバー状態を維持する必要があります。私はcodepenであなたのCSSの72行目にこのコード行を追加しました。それはモバイルビューで動作するようです。