OVH Community, votre nouvel espace communautaire.

Menu déroulant


planete
17/05/2015, 10h49
Bonjour,

Après 14 ans d’existence, je viens de refaire l'interface de mon petit site, j'ai modifié le menu pour le faire sous forme de menu déroulant.

Sur PC, aucun problème, il fonctionne parfaitement, mais mon problème viens sur tablette et smartphone!!!

En l'absence de souris, il fonctionne mal ! si vous voulez bien voir : http://www.aqua-planete.com/

Il devrait se refermer dès qu'on pointe (au doigt) ailleurs qu'au menu (ça le fais parfois mais pas toujours).

Je joigne le CSS, si quelqu'un veut bien m'aider?

Code:
/* main menu styles */
#nav {
    font-family:Arial;
	font-size:13px;
    display:inline-block;
    width:64%;
    margin:0px auto;
    padding:0;
    background:#265789 url(/forum/skins/defaut/off.gif) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
    margin:8px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:8px 20px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
#nav .current a, #nav li:hover > a {
    background:#A4B6C9 url(../images/bg.png) repeat-x 0 -20px;
    color:#000;
    border-top:1px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
}
#nav ul li a:hover {
    background:#265789 url(../images/bg.png) repeat-x 0 -100px;
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:340px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .1s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .1s linear, visibility .1s linear .1s;
    -o-transition:opacity .1s linear, visibility .1s linear .1s;
    transition:opacity .1s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:280px;
    top:0px;
}
Aussi, sur PC, le fait que le menu disparaisse dès que la souris sort du menu, pensez vous que ce soit une bonne idée? C'est pas un peu gênant parfois?

Merci beaucoup, d'avance...