J'ai créé une barre de navigation avec des propriétés flex. Maintenant, je souhaite ajouter un menu déroulant à un élément de la barre de navigation, mais cela ne fonctionne pas comme prévu.
@font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
}
nav {
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
nav ul {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
ul.drop-menu li {
display: none;
list-style: none;
}
li:hover > ul.drop-menu li {
display: flex;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo"><a href="#">SoulOTrip</a></li>
<li >
<a href="#">Adventure Trips</a>
<ul class="drop-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li><a href="#">Top Destinations</a></li>
<li><a href="#">Explore</a></li>
</ul>
<ul class="right">
<li class=""><a href="#">Username</a></li>
<li class=""><a href="/login">Login</a></li>
<li class=""><a href="/register">Register</a></li>
</ul>
</nav>
</body>
</html>Je veux le menu déroulant avec le conteneur flex afin de pouvoir créer 4 colonnes de pleine largeur de page, aussi je créerai un menu déroulant sur d'autres onglets.
En ajoutant position: relativeau navet position: absoluteau dropdown, rendra la dropdownposition / taille par rapport aunav
Réglage flex: 1sur les dropdownéléments flex »( li) va les faire étirer horizontalement
Mise à jour / ajout de ces 3 règles
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
li:hover > ul.drop-menu li {
display: flex;
flex: 1;
}
li > ul.drop-menu {
position: absolute;
display: flex;
left: 0;
top: 100%;
width: 100%;
}
Extrait de pile
@font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
nav ul {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
ul.drop-menu li {
display: none;
list-style: none;
}
li:hover > ul.drop-menu li {
display: flex;
flex: 1;
}
li > ul.drop-menu {
position: absolute;
display: flex;
left: 0;
top: 100%;
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo"><a href="#">SoulOTrip</a></li>
<li >
<a href="#">Adventure Trips</a>
<ul class="drop-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li><a href="#">Top Destinations</a></li>
<li><a href="#">Explore</a></li>
</ul>
<ul class="right">
<li class=""><a href="#">Username</a></li>
<li class=""><a href="/login">Login</a></li>
<li class=""><a href="/register">Register</a></li>
</ul>
</nav>
</body>
</html>Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots