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>
Related
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;
}
Hey guys I'm not sure what I'm doing wrong, but I want the 3rd li item (input) to go to the end of the container, when I use the justify-content: space-between; - nothing happens, I've tried aligning them, but still nothing.
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
}
.navContact {
margin-left: auto;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mainNav {
display: flex;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
You can set flex: 1 in the ul and the last item of the ul, then set margin-left: auto in the last li inside ul as well
*,
*::after,
*::before {
box-sizing: border-box
}
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
display: flex;
justify-content: space-between;
}
.mainNav {
display: flex;
flex: 1;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
.navitem:last-of-type {
margin-left: auto
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 4 years ago.
I am trying to get my both ULs align in center vertically(Cross axis). I was doing it in Sass and I may have gotten confuse because there was so much nesting. I am talking about ul that are direct child of nav i.e. "nav-main-list" and "nav-social-list".
This is my HTML code:
* {
margin: 0;
padding: 0;
}
body {
background: #f3c6c6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
nav {
background-color: #d42e2e;
height: 3rem;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
justify-content: center;
color: whitesmoke;
}
nav ul {
height: 100%;
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
margin: 0 2rem;
}
nav ul li {
height: 100%;
margin: 0;
margin-top: auto;
padding: 0 0.5rem;
}
nav ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li:hover ul {
margin: 1rem 0;
width: 100%;
display: flex;
flex-direction: column;
}
nav ul li:hover ul li {
width: 100%;
background: #d42e2e;
color: whitesmoke;
}
nav ul li:hover ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li ul {
display: none;
}
nav .nav-main-list {
text-transform: uppercase;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.2rem;
}
nav .nav-social-list {
justify-content: flex-end;
font-family: "Courier New", Courier, monospace;
font-size: 1rem;
align-content: center;
align-items: center;
}
<body>
<nav>
<ul class="nav-main-list">
<li>Home</li>
<li>Languages
<ul class="lang-list">
<li>html</li>
<li>css</li>
<li>sass</li>
<li>php</li>
<li>jquery</li>
</ul>
</li>
<li>Frameworks
<ul class="frame-list">
<li>Bootstrap</li>
<li>Laravel</li>
<li>Angular</li>
</ul>
</li>
<li>Tools
<ul class="tools-list">
<li class="a" href="#">Git</li>
<li class="a" href="#">Photoshop</li>
<li class="a" href="#">Github</li>
</ul>
</li>
</ul>
<ul class="nav-social-list">
<li>Fb</li>
<li>Twitter</li>
<li>Git</li>
<li>Codepen</li>
</ul>
</nav>
</body>
The problem is that both ul are on top and not in the center of navbar. I might do it correctly by re-coding from scratch but I want to find error or reason why it's not working.
Thank You and have a Nice Day!!!
I think the issue you are seeing is to do with the padding & margins. I made a few tweaks to those, not sure if it's an improvement.
* {
margin: 0;
padding: 0;
}
body {
background: #f3c6c6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
nav {
background-color: #d42e2e;
height: 2.5rem;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
justify-content: center;
color: whitesmoke;
}
nav ul {
height: 100%;
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
margin: 0 2rem;
vertical-align: middle;
}
nav ul li {
height: 100%;
margin: 0;
margin-top: auto;
padding: 0.25rem 0.5rem;
}
nav ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li:hover ul {
margin: 0.5rem 0 0.25rem 0;
width: 100%;
display: flex;
flex-direction: column;
}
nav ul li:hover ul li {
width: 100%;
background: #d42e2e;
color: whitesmoke;
}
nav ul li:hover ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li ul {
display: none;
}
nav .nav-main-list {
text-transform: uppercase;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.2rem;
}
nav .nav-social-list {
justify-content: flex-end;
font-family: "Courier New", Courier, monospace;
font-size: 1rem;
align-content: center;
align-items: center;
}
<body>
<nav>
<ul class="nav-main-list">
<li>Home</li>
<li>Languages
<ul class="lang-list">
<li>html</li>
<li>css</li>
<li>sass</li>
<li>php</li>
<li>jquery</li>
</ul>
</li>
<li>Frameworks
<ul class="frame-list">
<li>Bootstrap</li>
<li>Laravel</li>
<li>Angular</li>
</ul>
</li>
<li>Tools
<ul class="tools-list">
<li class="a" href="#">Git</li>
<li class="a" href="#">Photoshop</li>
<li class="a" href="#">Github</li>
</ul>
</li>
</ul>
<ul class="nav-social-list">
<li>Fb</li>
<li>Twitter</li>
<li>Git</li>
<li>Codepen</li>
</ul>
</nav>
(See this great article from CSS Tricks for a complete guide to using flex.)
I'm having some trouble making a nav menu and its sub menu to display via the pseudo checkbox toggle. I looked at some guides and tried some, but I'm not getting the result I wanted -- the menus does not appear when toggle the checkbox on.
https://codepen.io/UnorthodoxThing/pen/paMBQB
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Natural Pasta</title>
<link rel="stylesheet" type="text/css" href="style-index.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah|Gorditas|Lobster|Nunito|Shadows+Into+Light|Varela+Round" rel="stylesheet">
<body>
<div class="wrapper">
<!-- Top Menu-->
<img class="top-logo" src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="220px" height="220px">
<div class="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
<div class="dropdown-menu">
<input type="checkbox" id="A">
<label for="A">Menu</label>
<ul>
<li>Pastas To Go</li>
<li>Sauces To Go</li>
<li>
<div class="dropdown-readymeals">
<input type="checkbox" id="A-C">
<label for="A-C" style="font-size:10pt;">Ready Meals...</label>
<ul>
<li>Arancinis</li>
<li style="font-size:10pt;">Garlic Bread</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Find Us</li>
</ul>
</div>
</div>
<div class="banner">
<!--
<img src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="300px" height="300px">
-->
</div>
<div class="body-content">
<div class="specials-title"><h3>- SPECIALISING IN -</h3></div>
<div class="specials-content">
<div class="specials-boxes"><div class="specials-text"><h3>Freshly Hand Made Pastas</h3></div><div class="specials-img"><img src="freshlyhandmadepastas-1.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Pasta Meals</h3></div><div class="specials-img"><img src="gourmetpastameals-3.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Traditional Home Made Sauces</h3></div><div class="specials-img"><img src="traditionalhomemadesauces.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Variety of Filled Pastas</h3></div><div class="specials-img"><img src="varietyoffilledpastas-1.jpeg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Home Made Soups</h3></div><div class="specials-img"><img src="homemadesoups-2.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Rolls</h3></div><div class="specials-img"><img src="gourmetroles-1.jpg"></div></div>
</div>
</div>
<div class="footer">
<!--<div class="grid">-->
<div class="upper-footer-container">
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Follow Us</h4>
<ul class="social-networks">
<li class="flex-items"><img src="fb-icon.png"></img></li>
<li class="flex-items"><img src="instagram-icon.png"></img></div></li>
</ul>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Opening Hours</h4> <br>
<ul class="contact-details">
<li>Monday: 9am-5:30pm</li>
<li>Tuesday: 9am-5:30pm</li>
<li>Wednesday: 9am-5:30pm</li>
<li>Thursday: 9am-9pm</li>
<li>Friday: 9am-5:30pm</li>
<li>Saturday: 9am-5pm</li>
<li>Sunday: 10am-5pm</li>
</ul>
</div>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Contact Us</h4> <br>
<ul class="contact-details">
<li>Add.: 152 Bunnerong Rd, Eastgardens NSW 2036</li>
<li>No.: (02) 8347 1988</li>
<li>Email</li>
<br>
<li>Catering Available</li>
</ul>
</div>
</div>
<div class="lower-footer-container">NaturalPasta © 2018</div>
<!--/div>-->
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
}
.wrapper {
min-height: 100%;
width: 100%;
position: relative;
background: url("img/pasta-food-wallpaper-4.jpg") no-repeat;
background-size: 1350px 670px;
background-position: center;
background-attachment: fixed;
}
body {
height: 100%;
background: #ddd;
}
.nav {
height: 204px;
width: 100%;
margin: 0 auto; /* Centers navigation */
text-align: center;
text-transform: uppercase;
background: black;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-family: 'Gloria Hallelujah', cursive;
color: #ee6f20;
font-weight: bold;
font-size: 13pt;
}
.nav ul li {
height: 41px;
width: 125px;
background: #000;
}
.nav .dropdown-menu ul, .dropdown-menu .readymeals ul {
background: #000;
}
.nav a {
text-decoration: none;
color: #ee6f20;
}
.dropdown-menu ul li, .dropdown-readymeals ul li {
display: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.dropdown-menu ul {
position: absolute;
display: none;
}
input[type=checkbox] {
display: none;
}
input#A:checked ~ .dropdown-menu ul li {
display: block;
max-height: 100%;
}
input#A-C[type=checkbox]:checked ~ .dropdown-readymeals ul li {
display: block;
}
/*tbc */
.dropdown-menu ul li {
font-size: 11pt;
background: #000;
}
.nav ul {
list-style: none;
display: inherit;
}
.nav ul li, .nav ul ul, .nav ul ul li, .nav label {
cursor: pointer;
}
.top-logo {
margin: auto 0;
position: absolute;
left: 42%;
margin-top: -15px;
}
.body-content {
background-color: #000;
}
.specials-content {
position: relative;
display: flex;
flex-wrap: wrap;
color: orange;
justify-content: center;
}
.specials-title h3 {
width: 100%;
display: block;
margin-top: 0px;
padding-top: 75px;
color: #ee6f20;
}
.specials-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 35px 75px;
padding: 50px 100px;
/*adjust margin height-width*/
}
.specials-text, .specials-img {
padding: 35px;
display: flex;
align-items: center;
}
.specials-text h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #ee6f20;
}
.specials-img img {
width: 300px;
height: 300px;
border-radius: 25px 5px 25px 5px;
}
h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #eee;
}
.footer {
bottom: 280px;
padding: 150px;
width: 100%;
text-align: center;
background: rgb(0,0,0);
color: white;
font-family: sans-serif;
display: flex;
flex-flow: wrap;
}
.upper-footer-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
.footer-container-1 {
width: 250px;
display: block;
margin: 25px;
}
.social-networks {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-items a img {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 25px;
}
.contact-details {
list-style: none;
font-family: 'ubuntu', sans-serif;
}
.lower-footer-container {
width: 100%;
justify-content: center;
display: flex;
flex-wrap: wrap;
margin-top: 45px;
}
Is it to do with the html? The CSS? What could be interfering from displaying the menu and its submenu? :/
Much appreciated for the long run.
(P.S. I have other source image used in here, though that should not conflict with what I'm trying to resolve.)
In your code the <ul> tag is the sibling of selector input#A
But you have written css code as if .dropdown-menu is the sibling of selector input#A. This is why your code at this particular point doesn't work.
You have to target <ul> when input#A is clicked. <ul> is the sibling of input#A.
Change the css code on line 81 as below
input#A:checked ~ ul li {
display: block;
max-height: 100%;
}
This code change will make your sub-menu visible when you click Menu as shown in below image.
i'm mentioning the fix only for this particular point. In your codepen i can see that you've made this same mistake in few other places. You have to fix it.
Hope this helps.
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>