Survol sur Windows Phone

by oilvier

HTML

<div class="main">
            <ul class="nav nav-children">
                <li class="has-children" aria-haspopup="true">
                    <a href="#">Item</a>
                    <ul class="children">
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                    </ul>
                </li>
                <li class="has-children" aria-haspopup="true">
                    <a href="#">Item</a>
                    <ul class="children">
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                    </ul>
                </li>
                <li class="has-children" aria-haspopup="true">
                    <a href="#">Item</a>
                    <ul class="children">
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                    </ul>
                </li>
                <li class="has-children" aria-haspopup="true">
                    <a href="#">Item</a>
                    <ul class="children">
                        <li><a...

CSS

* {margin:0; padding:0;}
            li {list-style:none;}
            body {padding:20px; font-family:Arial; font-size:62.5%;}
            
            a {padding:5px;}
            
            .nav {font-size:0; text-align: left;}
            .nav > li, .nav > li > a {display:inline-block; font-size: 1.4rem;}

            /* Navigation verticale */
            .nav-vertical > li,
            .children > li {display:list-item;}

            /* Trigger sous-menu */
            .has-children {position:relative;}
                /* Sous-menu */
                .nav-children .children {position:absolute; top:100%; left:-99999em;}
                    .nav-children .children > li {}
                        .nav-children .children > li > a {display:block;}

            /* Apparition sous-menu */
            .nav-children .has-children:hover > .children {left:0;}
            /* Second niveau */
            .nav-children .children .has-children:hover > .children {top:0; left:100%;}

            .main {position: relative; z-index:2; width: auto; min-width:960px;}
.children {background:beige; font-size: 12px;}

JavaScript

/**
 * L'ajout de `aria-haspopup="true"` permet de rendre fonctionnel le survol sur Windows phone
 */