在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上显示和隐藏导航菜单

回答

相关问题