CSSドロップダウンメニューを表示しない

Question

私はCSSでドロップダウンメニューを作成しました。私の問題は、メニューの外のどこかにタッチするとドロップダウンが携帯電話で固定されることです。携帯電話でドロップダウンメニューを非表示にするにはどうすればいいですか？マウスのあるデスクトップではうまく動作します。ここ

は私のCSSです：

#nav { 
 
\t margin: 0; 
 
\t text-align:center; 
 
\t position:fixed; 
 
\t width:1162px; 
 
\t top: 0%; 
 
\t left: 50%; 
 
\t margin-left: -587px; /* Die Hälfte der Breite (width) + 6px */ 
 
\t padding: 7px 6px 0; 
 
\t background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px; 
 
\t line-height: 100%; 
 

 
\t border-radius: 1em; 
 
\t -webkit-border-radius: 1em; 
 
\t -moz-border-radius: 1em; 
 

 
\t -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); 
 
\t -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); 
 
} 
 
#nav li { 
 
\t margin: 0 5px; 
 
\t padding: 0 0 8px; 
 
\t float: left; 
 
\t position: relative; 
 
\t list-style: none; 
 
} 
 

 

 
/* main level link */ 
 
#nav a { 
 
\t font-weight: bold; 
 
\t color: #e7e5e5; 
 
\t text-decoration: none; 
 
\t display: block; 
 
\t padding: 8px 20px; 
 
\t margin: 0; 
 

 
\t -webkit-border-radius: 1.6em; 
 
\t -moz-border-radius: 1.6em; 
 
\t 
 
\t text-shadow: 0 1px 1px rgba(0,0,0, .3); 
 
} 
 
#nav a:hover { 
 
\t background: #000; 
 
\t color: #fff; 
 
} 
 

 
/* main level link hover */ 
 
#nav .current a, #nav li:hover > a { 
 
\t background: #666 url(img/gradient.png) repeat-x 0 -40px; 
 
\t color: #444; 
 
\t border-top: solid 1px #f8f8f8; 
 

 
\t -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); 
 
\t -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); 
 
\t box-shadow: 0 1px 1px rgba(0,0,0, .2); 
 

 
\t text-shadow: 0 1px 0 rgba(255,255,255, 1); 
 
} 
 

 
/* sub levels link hover */ 
 
#nav ul li:hover a, #nav li:hover li a { 
 
\t background: none; 
 
\t border: none; 
 
\t color: #666; 
 

 
\t -webkit-box-shadow: none; 
 
\t -moz-box-shadow: none; 
 
} 
 
#nav ul a:hover { 
 
\t background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important; 
 
\t color: #fff !important; 
 

 
\t -webkit-border-radius: 0; 
 
\t -moz-border-radius: 0; 
 

 
\t text-shadow: 0 1px 1px rgba(0,0,0, .1); 
 
} 
 

 
/* dropdown */ 
 
#nav li:hover > ul { 
 
\t display: block; 
 
} 
 

 
/* level 2 list */ 
 
#nav ul { 
 
\t display: none; 
 

 
\t margin: 0; 
 
\t padding: 0; 
 
\t width: 185px; 
 
\t position: absolute; 
 
\t top: 35px; 
 
\t left: 0; 
 
\t background: #ddd url(img/gradient.png) repeat-x 0 0; 
 
\t border: solid 1px #b4b4b4; 
 

 
\t -webkit-border-radius: 10px; 
 
\t -moz-border-radius: 10px; 
 
\t border-radius: 10px; 
 

 
\t -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
 
\t -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
 
\t box-shadow: 0 1px 3px rgba(0,0,0, .3); 
 
} 
 
#nav ul li { 
 
\t float: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#nav ul a { 
 
\t font-weight: normal; 
 
\t text-shadow: 0 1px 0 #fff; 
 
} 
 

 
/* level 3+ list */ 
 
#nav ul ul { 
 
\t left: 185px; 
 
\t top: -1px; 
 
} 
 

 
/* rounded corners of first and last link */ 
 
#nav ul li:first-child > a { 
 
\t -webkit-border-top-left-radius: 9px; 
 
\t -moz-border-radius-topleft: 9px; 
 

 
\t -webkit-border-top-right-radius: 9px; 
 
\t -moz-border-radius-topright: 9px; 
 
} 
 
#nav ul li:last-child > a { 
 
\t -webkit-border-bottom-left-radius: 9px; 
 
\t -moz-border-radius-bottomleft: 9px; 
 

 
\t -webkit-border-bottom-right-radius: 9px; 
 
\t -moz-border-radius-bottomright: 9px; 
 
} 
 

 
/* clearfix */ 
 
#nav:after { 
 
\t content: "."; 
 
\t display: block; 
 
\t clear: both; 
 
\t visibility: hidden; 
 
\t line-height: 0; 
 
\t height: 0; 
 
} 
 
#nav { 
 
\t display: inline-block; 
 
} 
 
html[xmlns] #nav { 
 
\t display: block; 
 
} 
 
    
 
* html #nav { 
 
\t height: 1%; 
 
}

、ここULで設定したナビゲーションメニューとLi

<ul id="nav"> 
 
\t <li class="current"><a href="#">Test</a></li> 
 
\t <li><a href="#">Musik</a> 
 
\t \t <ul> 
 
\t \t \t <li><a href="#">Test</a></li> 
 
\t \t \t <li><a href="#">Test</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">Test</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </li> 
 
</ul>

Answer 1

\t ul { display:block; padding:0px;} 
 
\t ul li{ display: inline-block; position:relative;} 
 
\t ul li ul { display:none; position:absolute; top:100%; left:0;} 
 
\t ul li ul li { display:block;} 
 
\t ul li ul li ul { left:100%; top:0;} 
 
\t ul li:hover > ul { display:block; width:120px;}

<ul> 
 
    \t <li> 
 
     \t <a href="#">Menu option</a> 
 
     </li> 
 
     <li> 
 
     \t <a href="#">Menu option2</a> 
 
      <ul> 
 
      \t <li> 
 
       \t <a href="#">Submenu 1</a> 
 
        <ul> 
 
         <li> 
 
          <a href="#">Submenu 2</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#">Submenu</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Submenu</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul>

、あなたは