我使用了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列全页面宽度,并且我也会在其他选项卡上添加下拉式菜单。