Mobil açılır menü gitmez

Question

Mobil sitem için bu açılır menüye sahibim. Sorun, açılır menünün dışına tıklandığında kaybolmaz. Düğmeye tıklandığında, menüden diğer sitelerden birini seçmenin yanı sıra, menüden kurtulmanın bir yolu yoktur. Gösterdiğinizde, dışına tıklarsanız gitmesini sağlamak mümkün mü? Sadece bu aynı sorunu vardı ve buradan bir çözüm buldu

/* 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

: şeffaf bir resim kullanılarak etrafında
http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html

düzeltme merkezleri

Bu

benim kodudur İstediğimiz tarayıcı davranışını zorlamak için.

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

Ben şahsen yerine düğmeleri daha listeleri ile bu kullanıyorum, dolayısıyla gerektiğinde bazı ince olabilir: senin son </div> önce

// 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; 
} 

Ardından, HTML bu ekleyin: Bu CSS ekleyin. Ama listelerini kullanarak çalıştığını onaylayabilirim (<ul> ve <li> tabanlı menü).