28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu (trop) caché

Bonjour,

Je m'en remets à vous parce que je rencontre un problème avec le menu que j'ai créé et qui comprend un sous menu...

J'aimerais fait en sorte que mon sous-menu ne s'affiche pas, sauf si on survole sa catégorie (élément de liste) générique...

J'ai donc réussi sans problème à cacher mon menu, mais pour le réafficher, c'est une autre paire de manches...

Mon fichier html :

<nav><ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">&Agrave; propos</a></li>
    <li><a href="#">Nos actions</a></li>
    <li>
        <ul>
            <li><a href="#">Sensibilisation</a></li>
            <li>Stage</li>
            <li>Soutien scolaire</li>
        </ul>
    </li>
    <li><a href="#">Presse</a></li>
    <li><a href="#">Contact</a></li>
</ul></nav>


Ma CSS (la partie dédiée au nav) :

nav {
    position: absolute;
    width: 300px;
    padding-top: 70px;
}

nav ul {
    display: inline-block;
}

nav ul li {
    list-style-type: none;
    font-family: 'denseregular';
    font-size: 23pt;
    color: #000;
    line-height: 55px;
    text-align: right;
}

nav ul li ul {
    display: none;
}

nav ul li ul li {
    font-size: 18pt;
    line-height: 45px;
}

nav ul li:hover ul li {
    display: block;
    z-index: 1;
}


Outre ma dernière déclaration, j'ai essayé
nav ul li:nth-child(3):hover ul li { ...}
nav > ul li:hover ul li { ... }
nav ul li a:hover ul li { ... }

Rien de tout ça ne fonctionne...
Pourriez-vous m'aider? D'avance merci...
Modifié par Reka (10 Oct 2013 - 15:53)
Hello,

Il faut un élément déclencheur pour pouvoir modifier l'état du sous-menu au survol, s'il est caché, pas moyen de le faire réapparaitre... 
<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li>[b]<a href="#">Nos actions</a>[/b]
      <ul>
        <li><a href="#">Sensibilisation</a></li>
        <li><a href="#">Stage</a></li>
        <li><a href="#">Soutien scolaire</a></li>
      </ul>
    </li>
    <li><a href="#">Presse</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>


Tu peux sans doute t'inspirer de l'existant pour bien comprendre le mécanisme.
Voir du côté des solutions JavaScript.

Bon courage
Ok j'avais pas vu, ton html est erroné.
6l20 ta répondu par rapport à ton ul, reprend mon code CSS et son html, ça devrait fonctionner.
On peut tout de même faire apparaître le sous menu

nav ul li:hover+li ul {
    display: block;
}

Par contre la structure HTML est bien fausse et le menu perdra son sens.
Sujet clos
Aller à