モバイルドロップダウンメニューは表示されません

Question

私のモバイルサイト用のこのドロップダウンメニューがあります。問題は、ドロップダウンメニューの外側をクリックしても消えないことです。ボタンをクリックすると、メニューから他のサイトの1つを選択するだけでなく、メニューをもう一度取り除く方法はありません。あなたがそれを外に出すとそれが消えてしまうことは、それが可能なのでしょうか？

これは私のコードです：

/* Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #948a69; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
/* Show the dropdown menu on hover */ 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 
.dropdown:hover .dropbtn { 
 
    background-color: #9e9370; 
 
}

<div style="position:absolute; top:15px; left:15px;"> 
 
<div class="dropdown"> 
 
    <button class="dropbtn"><b>MENU</b></button> 
 
    <div class="dropdown-content"> 
 
    <a href="index.html">Velkommen</a> 
 
    <a href="bock.html">Produkter</a> 
 
    <a href="fadol.html">Fadøl</a> 
 
    <a href="historie.html">Historie</a> 
 
    <a href="kontakt.html">Kontakt </a> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

私はちょうどこれと同じ問題を持っていたし、ここからの解決策が見つかりました：透明なイメージを使用して周りに
http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html

修正センター私たちが望むブラウザの振る舞いを強制する。このCSSを追加します。

// For the Safari mobile browser 
div img.close { 
    display: none; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: -1; 
} 

div button:hover + img { 
    display: block; 
} 

は、その後、あなたの最後の</div>前に、あなたのHTMLにこれを追加します。

<img class="close" src="ipad/trans.gif" /> 

私は個人的にはリストではなく、ボタンでこれを使用していますので、必要に応じていくつかの調整があるかもしれません。しかし、私はそれがリスト（<ul>と<li>ベースのメニュー）を使用して動作確認することができます。