我制作了一个具有 flex 属性的导航栏。现在我想向导航栏中的元素添加下拉菜单，但它没有按预期工作。
@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>我想要带有 flex 容器的下拉菜单，这样我就可以创建 4 列全页宽度，我也会在其他选项卡上制作下拉菜单。
最佳答案
通过将 position: relative 添加到 nav 并将 position: absolute 添加到 dropdown，将使dropdown 相对于 nav
在 dropdown 的 flex 元素 (li) 上设置 flex: 1 将使它们水平拉伸(stretch)
更新/添加了这 3 条规则
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%;
}
堆栈片段
@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>关于html - 在 flexbox 导航栏中制作下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43303631/