Sous menu dans la barre de navigation

Fermé

founzo Messages postés 17 Date d'inscription jeudi 23 avril 2009 Statut Membre Dernière intervention 17 novembre 2017 - 9 oct. 2017 à 14:54
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 10 oct. 2017 à 14:09

Bonjour,
J'ai un soucis avec ma barre de navigation, en effet je souhaiterai que le sous-menu s'affiche de manière verticale quand on passe sur l'onglet "Nos Services", pour l'instant la barre de navigation bug et affiche les éléments du sous-menu horizontalement. Je souhaite avoir un effet assez similaire à celui qui s'affiche lorsqu’on survole l'onglet 'Langue' du site Comment Ça Marche.
Je vous mets mes codes HTML et CSS pour plus de compréhension,
Cordialement.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>DCAT | Welcome</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>

    <header>
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">D C A T</span> </h1>
        </div>

        <nav>
          <ul>
            <li class="current"><a href="index.html" rel="nofollow noopener noreferrer" target="_blank">Accueil</a></li>
            <li><a href="services.html" rel="nofollow noopener noreferrer" target="_blank">Nos Services</a>
              <ul>
                    <li><a href="domotique.html" rel="nofollow noopener noreferrer" target="_blank">Domotique</a></li>
                    <li><a href="securite.html" rel="nofollow noopener noreferrer" target="_blank">Sécurité informatique</a></li>
                    <li><a href="solutions.html" rel="nofollow noopener noreferrer" target="_blank">Solutions intégrées</a></li>
              </ul>
            </li>
            <li><a href="qui.html" rel="nofollow noopener noreferrer" target="_blank">Qui Sommes-Nous?</a></li>
            <li><a href="references.html" rel="nofollow noopener noreferrer" target="_blank">Nos Références</a></li>
            <li><a href="contact.html" rel="nofollow noopener noreferrer" target="_blank">Contact</a></li>
          </ul>
        </nav>

      </div>
    </header>

  </body>
</html>

-----------------------------------------


  body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

/* Global */
.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}

/* Header **/
header{
  background:#35424a;
  color:#ffffff;
  padding-top:30px;
  min-height:70px;
  border-bottom:#e8491d 3px solid;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}

header li{
  float:left;
  display:inline-block;
  padding: 0 20px 0 20px;
}

header #branding{
  float:left;
}

header #branding h1{
  margin:0;
}

header nav{
  float:right;
  margin-top:10px;
}

header .highlight, header .current a{
  color:#e8491d;
  font-weight:bold;
}

header a:hover{
  color:#cccccc;
  font-weight:bold;
}

nav ul{
  margin:0;
  padding:0;
}

nav ul li ul li{
  display:none;
}

nav ul li:hover ul li{
  display:inline-block;
}

A voir également:

Sous menu dans la barre de navigation
Navigation privée - Guide
Menu déroulant excel - Guide
Que doit-il faire pour effacer les traces de sa navigation ? - Guide
Windows 11 barre des taches a gauche - Guide
Menu démarrer windows 11 - Guide

1 réponse

Réponse 1 / 1

AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
9 oct. 2017 à 17:03

Bonjour,

Là, comme ça sans test, je dirais d'essayer d'enlever ta dernière instruction CSS.

nav ul li:hover ul li{
  display:inline-block;
}

"inline", c'est pour avoir un truc en ligne. Sinon les ul et les li s'affichent naturellement verticaux.

founzo Messages postés 17 Date d'inscription jeudi 23 avril 2009 Statut Membre Dernière intervention 17 novembre 2017
10 oct. 2017 à 13:33

merci déjà pour ta réponse, j'ai enlevé la ligne comme tu l'as indiqué mais je ne vois plus les éléments du sous-menu quand le curseur survole l'option "Nos Services".

AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
10 oct. 2017 à 14:09

Oui, c'est parce que ton bloc est caché. (display none)
Alors je te dirais de faire un truc comme ça :

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

Discussions similaires

Barre verticale droite sur clavier

Barre de navigation outlook

les entrées et les sortées

[Navigation Internet] Trace de navigation

Barre verticale droite sur clavier mac

Discussions similaires

Newsletters