Question

我正在为我的老师开一个小网站，我应该用子菜单做一个导航菜单（我正在使用：悬停）。该网站将用于计算机和平板电脑或Ipad。我的菜单已经完成但是在平板电脑上我遇到了以下问题：我的子菜单显示效果不错，但是当我触摸屏幕上的其他地方时它不会隐藏（徽标除外 - 不知道为什么）。另一个学生告诉我他找到了一个解决方案但当他触摸子菜单中的一个链接时，子菜单隐藏了，这不是我想要的结果。我们的老师告诉我们，除了HTML和CSS之外，我们绝对不能使用别的东西（没有JS，没有Jquery）。

这是我的代码：

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>

Answer 1

您需要使页面响应。将其添加到HEAD部分

＆＃13;

<!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>

＆＃13;

在Ipad上显示和隐藏导航菜单

1 个答案: