I'm having trouble figuring out why the dropdown menu goes horizontal. I made a horizontal menu to start with and tried adding a dropdown to it. However, it goes horizontal and I can't figure out why.
I've been racking my brain over this for hours but I don't know what to do.
Please help me.
nav li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li:last-child {
border-right: none;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
background-color: #ffffff;
}
#menu-container {
display: flex;
width: 100%;
justify-self: center;
justify-content: center;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown {
position: relative;
z-index: 100;
}
.dropdown {
display: inline-block;
margin-left: 10px;
}
.dropdown:hover .dropdown-menu {
height: auto;
opacity: 1;
}
.dropdown-menu {
position: absolute;
z-index: 90;
align-items: stretch;
background-color: rgb(68, 68, 68);
list-style: none;
overflow: hidden;
height: auto;
opacity: 0;
transition: opacity 0.5s;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
top: 0;
}
<nav class="navbar">
<div id="menu-container">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link-dropdown" href="#">Women</a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="#">New</a></li>
<li><a class="nav-link" href="#">Tops</a></li>
<li><a class="nav-link" href="#">Bottoms</a></li>
<li><a class="nav-link" href="#">Accessories</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
if you write flex instead of block your navbar is shown as vertical because you can style the element on n the vertical side with flex
in CSS in the .new-menu write flex instead of block in display property
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column
;
}
In nav-menu class you need to add the property flex-direction and give it the value column.
This will make the cross axis go horizontally and main axis go vertically.
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column;
}
More about it in detail here Flex-direction
Dear you have a lot of errors in CSS Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>home</li>
<li>About</li>
<li>Services
<ul>
<li>Marketing</li>
<li>Design
<ul>
<li>Web</li>
<li>Graphics</li>
<li>Interior</li>
</ul>
</li>
<li>Branding</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
}
body{
background-image: url(1.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
height: 100vh;
}
.wrapper{
width: 860px;
margin: 0 auto;
}
.wrapper ul{
list-style: none;
margin-top: 2%;
}
.wrapper ul li {
background: #262626;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
font-family: poppins;
text-transform: uppercase;
font-weight: bold;
}
.wrapper ul li:hover{
background: crimson;
}
.wrapper ul ul{
display: none;
}
.wrapper ul li:hover > ul{
display: block;
}
.wrapper ul ul ul{
margin-left: 170px;
top: 0;
position: absolute;
}
In your css you've provided the selector nav ul. Now what this does, it applies the style to every ul descendent of parent nav. This means it is getting applied even to the dropdown-menu. Hence to specify that it is applicable only to the child we use the child combinator selector nav > div > ul
nav > div > ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
position: relative;
top: 0;
}
Related
This is my html code, and the lower one is css code. I really need help :(
:hover class does not work at all. Did I code something wrong?
html {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
.nav_bar>li {
padding: 20px;
flex-basis: 0;
flex-grow: 1;
background-color: #ffffa8;
height: 1rem;
text-align: center;
flex-direction: column;
}
#Homesub {
display: none;
}
#Home:hover #Homesub {
display: list-item;
}
<nav>
<ul class="nav_bar">
<li>
Home
<ul class="sub">
<li>Members</li>
</ul>
</li>
</ul>
</nav>
You are targeting the anchor, not the li
Seems like you should be targeting the ul.
html {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
.nav_bar>li {
padding: 20px;
flex-basis: 0;
flex-grow: 1;
background-color: #ffffa8;
height: 1rem;
text-align: center;
flex-direction: column;
}
li > ul {
display: none;
}
li:hover > ul {
display: block;
}
<nav>
<ul class="nav_bar">
<li>
Home
<ul class="sub">
<li>Members</li>
</ul>
</li>
</ul>
</nav>
* {
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
nav {
width: auto;
display: flex;
justify-content: center;
}
nav > ul > li {
background-color: #ddd;
padding: 10px 20px;
text-transform: uppercase;
position: relative;
}
nav > ul > li > a + ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: rgb(243 243 243);
width: 100%;
text-align: center;
padding: 10px;
}
nav > ul > li:hover > a + ul {
display: initial;
}
<nav>
<ul class="nav_bar">
<li>
Home
<ul class="sub">
<li>
Members
</li>
</ul>
</li>
</ul>
</nav>
I'm trying to replica the navigation menu from this website. I've managed to it working to a certain extent, but can't make the service link when hovered to stay the same colour and all of the other to change.
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee !important;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
As you can see I've changed the link colours on hover of the unordered list which is probably not the best way of trying to get this to work. Please, could someone advise me on the best method to fix this?
You're close -- you have to remove the !important from the rule affecting .nav ul:hover a as this is overriding the rule that will ensure the hovered item is a different color than the rest:
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Here's a good resource on how !important affects other rules on the page.
I am new to CSS and I was trying to create a very basic navigation bar.
My HTML and CSS are given below.
The problem is when I hover over my FEATURES tab nothing happens even though I have changed the feature-menu displays to flex from none upon hovering.
I am not able to find any mistake in my code. Could anyone please tell where I have gone wrong?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown span:hover .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
left: 990px;
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Let's review your HTML structure.
Here's the relevant part:
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
.
.
.
Here's the CSS selector you're applying:
.dropdown span:hover .features-menu
So the problem is clear.
You're going from one level (.dropdown), down a level (to the span), then back up a level (to the .features-menu).
You're trying to target the .features-menu from an element positioned lower in the HTML structure. CSS doesn't work that way.
CSS can only target downward or forward. It cannot target upward or backward.
These concepts are explained in detail in these posts:
Is there a CSS parent selector?
Is there a "previous sibling" CSS selector?
You can make your hovering work by targeting "forward" (using your original – malformed – HTML), using sibling combinators (+ or ~).
.dropdown:hover + .features-menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover + .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li><!-- closing tag doesn't go here -->
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Or, you can make your hovering behavior work by targeting "downward" (using correctly formed HTML), using descendant selectors (> or [space]).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover > .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
</li><!-- closing tag goes here -->
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
I want the dropdown flex to be like this
This is what I found on internet, it uses simple dropdown menu.
I want the dropdown menu using flexbox and its properties. The problem is that the number of elements in a column is dynamic but flexbox container do not change its height according to it.
This is what I get
The code
* {
font-family: sans-serif;
}
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
background-color: #cbcbcb;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
border-bottom-width: 1px;
border-bottom-color: black;
}
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;
}
li > ul.drop-menu {
display: none;
}
li:hover > ul.drop-menu {
position: absolute;
top: 100%;
background-color: white;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding-left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.drop-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.drop-col > ul {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 0;
}
.drop-header {
font-size: 18px;
font-family: sans-serif;
color: #ff3546;
padding-top: 5px;
padding-bottom: 5px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<script src="live.js"></script>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<div class="drop-col">
<ul>
<li class="drop-header">Airforce</li>
<li>Flying fox</li>
<li>Bungee Jumping</li>
<li>Paragliding</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Army</li>
<li>Skiing</li>
<li>Mountaineering</li>
<li>Trekking</li>
<li>Rock Climbing</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Navy</li>
<li>River Rafting</li>
<li>Parasailing</li>
<li>Scuba Diving</li>
<li>Swimming</li>
<li>Kayaking</li>
<li>Surfing</li>
</ul>
</div>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
The problem is, that you accidently target the drop down menu as well and thus restrict it to 50px as well. You can fix this, by changing the selector from
nav ul {
/* this affects all ul elements inside the nav, the first level
.left as well as the .drop-menu */
}
to the following:
nav > ul { /* <- this affects only the direct descendant (ul.left) */ }
Alternatively you could change the height declaration to min-height.
* {
font-family: sans-serif;
}
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
background-color: #cbcbcb;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
border-bottom-width: 1px;
border-bottom-color: black;
}
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;
}
li > ul.drop-menu {
display: none;
}
li:hover > ul.drop-menu {
position: absolute;
top: 100%;
background-color: white;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding-left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.drop-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.drop-col > ul {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 0;
}
.drop-header {
font-size: 18px;
font-family: sans-serif;
color: #ff3546;
padding-top: 5px;
padding-bottom: 5px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<script src="live.js"></script>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<div class="drop-col">
<ul>
<li class="drop-header">Airforce</li>
<li>Flying fox</li>
<li>Bungee Jumping</li>
<li>Paragliding</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Army</li>
<li>Skiing</li>
<li>Mountaineering</li>
<li>Trekking</li>
<li>Rock Climbing</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Navy</li>
<li>River Rafting</li>
<li>Parasailing</li>
<li>Scuba Diving</li>
<li>Swimming</li>
<li>Kayaking</li>
<li>Surfing</li>
</ul>
</div>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
If I'm understanding the end goal, you want to change nav ul { height: 50px; } to min-height: 50px
* {
font-family: sans-serif;
}
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
background-color: #cbcbcb;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
border-bottom-width: 1px;
border-bottom-color: black;
}
nav ul {
min-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;
}
li > ul.drop-menu {
display: none;
}
li:hover > ul.drop-menu {
position: absolute;
top: 100%;
background-color: white;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding-left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.drop-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.drop-col > ul {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 0;
}
.drop-header {
font-size: 18px;
font-family: sans-serif;
color: #ff3546;
padding-top: 5px;
padding-bottom: 5px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<script src="live.js"></script>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<div class="drop-col">
<ul>
<li class="drop-header">Airforce</li>
<li>Flying fox</li>
<li>Bungee Jumping</li>
<li>Paragliding</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Army</li>
<li>Skiing</li>
<li>Mountaineering</li>
<li>Trekking</li>
<li>Rock Climbing</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Navy</li>
<li>River Rafting</li>
<li>Parasailing</li>
<li>Scuba Diving</li>
<li>Swimming</li>
<li>Kayaking</li>
<li>Surfing</li>
</ul>
</div>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
I have made a navbar with flex properties. Now I wish to add a drop down menu to a element in navbar, but it doesn't worked as expected.
#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">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
I want the dropdown menu with the flex container so that i can create 4 columns of full page width, also I will make drop down menu on other tabs too.
By adding position: relative to the nav and position: absolute to the dropdown, will make the dropdown position/size relative to the nav
Setting flex: 1 on the dropdown's flex items (li) will make them stretch horizontally
Updated/added these 3 rules
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%;
}
Stack snippet
#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">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
You don't need display:flex for li elements in dropdown
#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 ul>li{
position:relative;
}
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.left>li.drop-menu{
display:none;
position:absolute;
left:0;
}
.drop-menu li{
display:block;
}
ul.left>li:hover .drop-menu{
display:block;
}
I developed a large responsive_flex.css file for my works and my jumperl.com site.
While I was simplifying to the maximum, I found this post, here is the solution good man.
/* Menu Dropdown! please use div */
.dropdown{
display: flex;
flex-wrap: wrap;
flex-direction:column;
}
.dropdown > .dropdown-title{
/* put the height and width here! */
}
.dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column; /* or row */
}
.dropdown:hover > .dropdown-sub {
display: flex;
}.dropdown:hover > .dropdown-sub > .dropdown-option:hover{
background-color: #abcdef;
}
<div class="dropdown" style="background-color:#aaa;">
<div class="dropdown-title" style="background-color:#bbb; border:1px solid #000000;">Titulo</div>
<div class="dropdown-sub" style="background-color: #cccccc;">
<div class="dropdown-option">option 1</div>
<div class="dropdown-option">option 2</div>
<div class="dropdown-option">option 3</div>
</div>
</div>
this resolve one problem about likely position abosolute on sub menu.
Perdón my poor english amico mio
/* Menu Dropdown! please use div */
.dropdown{
display: flex;
flex-wrap:wrap;
flex-direction: row; /* or column */
/* put the height and width here! */
}
.dropdown > .dropdown-title{
width: 100%;
height: 100%;
}
.dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column; /* or row */
/* width: 100%; */
}
.dropdown:hover > .dropdown-sub {
display: flex;
}.dropdown:hover > .dropdown-sub > .dropdown-option:hover{
/* background-color: #abcdef; */
}
<div class=" dropdown" style="background-color:#aaa;height: 20px;">
<div class="dropdown-title" style="background-color:#bbb; border:1px solid #000000;">Titulo</div>
<div class="dropdown-sub" style="background-color: #cccccc;">
<div class="dropdown-option">option 1</div>
<div class="dropdown-option">option 2</div>
<div class="dropdown-option">option 3</div>
</div>
</div>
<div>Random bottom item</div>