show and hide navigation menu on Ipad

Question

I am working on a small website for my teacher and I am supposed to do a navigation menu with submenu (I am using :hover). That website will be used on computer and on tablets or Ipad. My menu is finished but on tablets I encounter the following issue : my submenu shows well but it does not hide when I touch elsewhere on the screen (except on the logo - do not know why). An other student told me he found a solution but when he touched one of the links in the submenu, the submenu hide and this is not the result I want. Our teacher told us we must absolutely not use something else than HTML and CSS (No JS, no Jquery).

Here is my code :

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>

I found this solution : http://stackoverflow.com/questions/714471/jquery-hide-element-when-clicked-anywhere-on-the-page but is there any that does not use Jquery / Javascript ? — Ch1ken, Feb 23 '17 at 07:13

score 0 · Answer 1 · answered Feb 22 '17 at 15:14

0

You need to make the page responsive. Add this into the HEAD section

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

answered Feb 22 '17 at 15:14

mlegg

784
6
19
35

Unfortunately it does not work. My submenu still shows well on Ipad but it does not hide when I touch elsewhere on the screen (except on the logo) – Ch1ken Feb 22 '17 at 15:21

show and hide navigation menu on Ipad

1 Answers1