Contraire d'inline-block en display

Fermé

[TiDi] Messages postés 126 Date d'inscription samedi 19 octobre 2013 Statut Membre Dernière intervention 17 juillet 2016 - Modifié par [TiDi] le 26/03/2014 à 17:57
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 27 mars 2014 à 23:49

Bonjour,

Je cherche à faire un menu déroulant. Le premier groupe (le menu visible) doit être en inline-block mais je voudrais que les sous-menus soient normal, que chaque liste soit à la ligne.

    <nav>
     <ul class="level1" id="nav">
      <li><a href="index.php">Accueil</a></li>
      <li><a href="presentation.php">Présentation officielle</a></li>
      <li><a href="actualite.php">Acutalité</a></li>
      <li><a href="recherche.php">Recherche & Développement</a></li>
      <li><a href="achat_groupe.php">Achat Groupé</a></li>
      <li><a href="finances.php">Finances</a></li>
      <li><a href="compagnie/index.php">Compagnies membres</a>
       <ul class="level2">
        <li><a href="compagnie/consult_compagnie.php?id=1">Flight</a><li>
        <li><a href="compagnie/consult_compagnie.php?id=1">Flight</a><li>
        <li><a href="compagnie/consult_compagnie.php?id=1">Flight</a><li>
       </ul>
      </li>
     </ul>
    </nav>

nav
{
 text-align: center;
 vertical-align: middle;
}
nav a
{
 color: white;
 font-family: MS Reference, Arial, Serif;
 font-size: 1em;
 text-decoration: none;
}
nav ul
{
 list-style-type: none;
 display: inline-block;
}
nav li
{
 display: inline-block;
}
nav ul ul
{
 display: none;
 position: absolute;
 
}
nav li:hover ul.level2
{
 display: block;
}

Donc comment faire pour que ce level 2 soit normal et non inline-block comme définit dans nav ul et nav li ?

Merci de votre aide.

TiDi

A voir également:

Display:block
Display fusion - Télécharger - Divers Utilitaires
Peer block - Télécharger - Pare-feu
Wireless display edenwood iphone ✓ - Forum iPhone
Display name traduction ✓ - Forum Mail
Wireless display edenwood ✓ - Forum Téléviseurs

1 réponse

Réponse 1 / 1

3IR3 Messages postés 875 Date d'inscription mercredi 27 octobre 2010 Statut Membre Dernière intervention 25 avril 2022 226
26 mars 2014 à 21:10

Bonjour,

Est ce que le code ci-dessous marche pour ce que tu veux faire?

nav li 
{ 
display:inline-block;
position:relative 
}

nav li li 
{ 
display:block
 }
			
nav a 
{ 
display:block;
... 
}

[TiDi] Messages postés 126 Date d'inscription samedi 19 octobre 2013 Statut Membre Dernière intervention 17 juillet 2016 262
27 mars 2014 à 18:14

Non ça ne marche car tout les menus sont visibles, hover ne marche plus.

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
27 mars 2014 à 23:49

salut

comme dans ton code

nav ul ul {display:none;}

et

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

nav ul li ul li {display block;}

le style de .level12 {....} ne pourras te servir qu'a definir autre chose que display (par exemple color etc...)

Discussions similaires

Renseignement 1fichier

Connexion Smart TV Edenwood

Caster tv edenwood

Wireless display

Qu'est ce que Nvidia Display Container LS ?