在Ipad上顯示和隱藏導航菜單

我正在爲我的老師工作一個小型網站，我應該使用子菜單（我正在使用：懸停）執行導航菜單。該網站將在計算機和平板電腦或Ipad上使用。我的菜單完成，但在平板電腦上我遇到了以下問題：我的子菜單顯示良好，但是當我在其他地方觸摸屏幕上它並不掩飾（除了在標誌 - 不知道爲什麼）。另一學生告訴我，他找到了解決辦法，但是當他感動在子菜單，子菜單隱藏的鏈接之一，這不是我想要的結果。我們的老師告訴我們，我們絕對不能使用HTML和CSS以外的東西（不要JS，不要Jquery）。在Ipad上顯示和隱藏導航菜單

這裏是我的代碼：

body > header > nav { 
 
    min-width: 768px; 
 
    margin: 0 auto; 
 
    padding-top: 20px; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
} 
 

 
nav > ul ul { 
 
    position: absolute; 
 
    left: -999em; 
 
    text-align: left; 
 
} 
 

 
nav li { 
 
    width: 150px; 
 
} 
 

 
nav > ul > li { 
 
    display: inline-block; 
 
} 
 

 
nav a { 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 

 
nav > ul > li > a { 
 
    padding: 10px 0; 
 
    color: #44546A; 
 
} 
 

 
nav > ul ul li { 
 
    background-color: #333F50; 
 
    list-style-type: none; 
 
} 
 

 
nav > ul ul li a { 
 
    padding: 10px 0 10px 30px; 
 
} 
 

 
nav > ul ul li a { 
 
    color: #FAFAFA; 
 
    font-size: 0.9em; 
 
} 
 

 
nav > ul ul li:hover { 
 
    background-color: #51647f; 
 
} 
 

 
nav > ul li:hover ul { 
 
    left: auto; 
 
}

<html>  
 
    <body> 
 
     <header> 
 
      <img src="img/logo_def_vect.svg" alt="Logo"/> 
 
      <nav> 
 
       <ul> 
 
        <li> 
 
         <a href="#">Menu1</a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">SubMenu1.1</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="#">Menu2</a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">SubMenu2.2</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">SubMenu2.3</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </header> 
 
    </body> 
 
</html>

來源

2017-02-22 Cedric Beaud

我發現這個解決方案：http://stackoverflow.com/questions/714471/jquery-hide-element-when-clicked-anywhere在頁面中，但有沒有不使用jquery/Javascript？ –

你需要使頁面響應。這種添加到HEAD部分

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Website Title</title>

來源

2017-02-22 15:14:04 mlegg

不幸的是它不起作用。我的子菜單在Ipad上仍然很好顯示，但是當我在屏幕上的其他位置觸摸時（標識除外），它不會隱藏， –

在Ipad上顯示和隱藏導航菜單

回答

相關問題