Sous menu dans la barre de navigation
founzo
Messages postés
17
Date d'inscription
Statut
Membre
Dernière intervention
-
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
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.
-----------------------------------------
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
- Supprimer les données de navigation - Guide
- Windows 11 barre des taches a gauche - Guide
- Changer la couleur de la barre des taches - Guide
Alors je te dirais de faire un truc comme ça :
nav ul li:hover ul li{ display:block; }