We Keep Coding

My href attribute in my dropdown menu list is not working

I'm trying to create a dropdown menu list for my website that I'm working on my own. While I was making a dropdown list for my website, I ran into some problems. When I try to click one of the list in my dropdown menu, it doesn't head or open to the page where the href attribute is referencing it to. The same goes to all of my lists in my dropdown menu. How can I solve this problem so that my href links will work for each of my list?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: flex;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover {
background: #c6c0dd;
}
.dropdown button {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.dropdown button:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.brands button:focus+ul,
.sneakers button:focus+ul,
.gears button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<button>BRANDS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="sneakers">
<button>SNEAKERS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="gears">
<button>GEAR & APPAREL</button>
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</div>
</div>
</nav>

Your problem is pointer-events, specifically pointer-events:all, which is experimental and only applies to SVG anyway. Use pointer-events:auto instead.
Also as John mentioned in his answer, you are going to get race conditions on click of another element like a link with the use of focus on the button. Your overall approach to this should be reconsidered.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: flex;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
opacity: 0;
/*pointer-events: none;*/
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover {
background: #c6c0dd;
}
.dropdown button {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.dropdown button:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.brands button:focus+ul,
.sneakers button:focus+ul,
.gears button:focus+ul {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<button>BRANDS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="sneakers">
<button>SNEAKERS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="gears">
<button>GEAR & APPAREL</button>
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</div>
</div>
</nav>

The issue comes from your css . Remove this line pointer-events: none;
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible

Your issue is with using focus to display your dropdown menu. The moment you click away from your button, i.e. you click your link on your menu, it is no longer in focus and thus your dropdown menu disappears. I would recommend using an onclick function or using a checkbox instead of a button to achieve what you want.
Here's an example using the checkbox method.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: none;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover, .box:hover {
background: #c6c0dd;
}
.box {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.box:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.box input {
display: none;
}
.box input:checked +ul{
display: flex;
pointer-events: all;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<label class="box">BRANDS
<input type="checkbox" >
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</label>
</div>
<div class="sneakers">
<label class="box">SNEAKERS
<input type="checkbox" >
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</label>
</div>
<div class="gears">
<label class="box">GEAR & APPAREL
<input type="checkbox" >
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</label>
</div>
</div>
</nav>

my sub navigation bar is visible when i hover over the navbar element itself but disappears when i hover over it

I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help

You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo

How do I get my site to scroll properly on mobile

I am building a site with a js menu that loads content into a container div. The site works fine on desktop, and on the respsonsive mobile emulator on my desktop browser, but on my phone it doesn't scroll.
https://clippingpointmedia.co.za/cpm2019dev/
This is my main stylesheet:
/* CSS Document */
body {
padding: 0;
margin: 0;
background-color: #222;
font-family: 'Comfortaa';
}
#container {
display: block;
padding: 0;
}
#content {
margin-top: 0;
margin-right: 70px;
margin-left: 70px;
margin-bottom: 0px;
max-height:100vh;
overflow:hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
#page-content {
width: 100%;
min-height: 100vh;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #2693C1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#mobile-nav, .mobile-footer {
display: none;
}
.side-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: -300px;
width: 360px;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.side-menu {
width: 300px;
background-color: #fff;
}
.menu-toggle, .mobile-menu-toggle {
width: 60px;
height: 60px;
background-size: 90%;
background-image: url("../images/MenuButtonOpen.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
float: right;
position: relative;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
.menu-top {
height: 150px;
padding: 20px 0 0;
text-align: center;
}
#mobile-cp-logo {
background: url("../images/HomeIcon-light.svg") no-repeat center;
height: 45px;
padding-top: 10px;
margin-bottom: 10px;
margin-left: -30px
}
#cp-logo {
height: 120px;
max-width: 175px;
display: block;
margin: 0 auto 20px;
background: url("../images/HomeIcon-dark.svg") no-repeat center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
#pt-container {
padding: 15px 0;
background-color: #ccc;
text-align: center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
width: 100%;
}
#prod-title, #digi-title, #event-title {
background-color: #ccc;
text-transform: uppercase;
color: #fff;
border-top: 1px solid #2693C1;
border-bottom: 1px solid #2693C1;
padding: 10px 0;
width: 66.66667%;
margin: 0 auto;
font-size: 20px;
font-weight: 300;
display: none;
}
.side-menu ul {
list-style: none;
}
.side-ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 30px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
text-decoration: none;
}
.side-ul li a::after, .top-ul li a::after {
float: right;
content: url("../images/arrow-right.svg");
padding-right: 20px;
padding-left: -20px;
}
.side-ul li a:focus::before, .top-ul li a:focus::before {
float: left;
content: url("../images/arrow-left.svg");
padding-right: -20px;
padding-left: 20px;
}
.side-sub-ul ul, .side-footer ul, .mobile-sub-ul ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.side-sub-ul li, .side-footer li, .mobile-sub-ul li {
float: left;
width: 33.333333%;
}
.side-sub-ul li a, .side-footer li a, .mobile-sub-ul li a {
display: block;
text-align: center;
text-transform: lowercase;
text-decoration: none;
width: 100%;
}
.side-sub-ul li a, .mobile-sub-ul li a {
color: #606060;
background-color: #ccc;
font-size: 13px;
padding: 18px 0;
margin: 7px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.side-sub-ul li, .mobile-sub-ul li {
background-color: #ccc;
list-style-type: none;
}
.side-footer li a {
color: #273658;
font-size: 8px;
padding: 5px 0;
background-color: #fff;
width: 100%;
}
.show {
display: initial
}
.hide {
display: none;
}
.menu-item-tablet {
display: none !important;
}
.wes-hi {
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
}
.social {
position: fixed;
width: 60px;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.social a {
display: block;
text-align: center;
padding: 9px 0;
}
.mobile-footer a {
color: #fff;
font-size: 8px;
text-decoration: none;
padding: 0 5px;
}
.mobile-footer li {
display: inline-block;
}
#totop-btn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: rgba(0,0,0,0.8);
color: white;
cursor: pointer;
padding: 1px 14px 7px 15px;
font-size: 30px;
border-radius: 0;
transform: rotate(-90deg);
}
#totop-btn:hover {
color: #2693C1;
}
#bg {
position: fixed;
top: 0;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
z-index: -9;
background: url("../images/full-bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive Queries */
#media only screen and (max-width: 992px) {
/* Tablet View */
.menu-item {
display: none !important;
}
.menu-item-tablet {
display: block !important;
}
#content {
margin-right: 0;
/* padding-top: 10px;/* height: calc(100vh - 10px);*/
}
.social {
width: 100%;
bottom: 0;
transform: none;
text-align: center;
background: rgba(0,0,0,0.8);
top: auto;
position:absolute;
}
.social a {
display: inline-block;
padding: 5px;
}
.social a img {
transform: scale(0.75);
}
.mobile-footer {
display: inline-block;
vertical-align: 95%;
}
#totop-btn {
bottom: 50px;
}
.side-footer {
display: none
}
}
#media only screen and (max-width: 359px), (orientation: landscape) and (max-width:600px) {
/* Small Mobile View */
#container {
display: block;
width: 100%;
min-height: -webkit-fill-available;
}
#content {
margin-left: 0;
margin-top: 0;
padding-top: 0;
}
#page-content {
min-height: calc(100vh - 138px);
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.side-nav {
display: none;
position:absolute;
visibility: hidden;
z-index: -99999;
}
#mobile-nav {
/* position: fixed;*/
top: 0;
width: 100%;
display: block;
background-color: rgba(0,0,0,0.8);
padding: 10px 0;
height: 55px;
overflow: hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.mobile-menu-toggle {
height: 55px;
}
.top-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 20px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 14px;
text-transform: lowercase;
text-decoration: none;
}
.mobile-footer {
/* vertical-align: top;*/
padding-bottom: 3px;
}
.social {
height: 63px;
}
.social a {
padding: 4px 10px 0;
}
.side-sub-ul li a, .mobile-sub-ul li a {
padding: 15px 0;
margin: 7px 0;
}
}
And the relevant html:
<body>
<div id="loader"></div>
<div id="container" style="display: none">
<div id="mobile-nav">
<div class="mobile-menu-toggle" onclick="togglemobilenav()"></div>
<ul class="top-ul">
<div id="mobile-cp-logo"></div>
<li>Production
</li>
<li>Digital
</li>
<li>Events
</li>
</ul>
<ul class="mobile-sub-ul">
<li>About
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
<div class="side-nav">
<div class="menu-toggle" onclick="togglenav()"></div>
<div class="side-menu">
<div class="menu-top">
<div id="cp-logo"></div>
<div id="pt-container" style="display:none">
<div id="prod-title">Production</div>
<div id="digi-title">Digital</div>
<div id="event-title">Events</div>
</div>
</div>
<ul class="side-ul">
<li>Production
</li>
<li>Production
</li>
<li>Digital
</li>
<li>Digital
</li>
<li>Events
</li>
<li>Events
</li>
</ul>
<ul class="side-sub-ul">
<li>About
</li>
<li>About
</li>
<li>News
</li>
<li>News
</li>
<li>Contact
</li>
<li>Contact
</li>
</ul>
<ul class="side-footer">
<li>© clipping point 2019
</li>
<li>our terms & conditions
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<!-- content will be loaded here -->
<div id="content"></div>
<div class="social">
<img src="images/li-icon.svg" alt="" />
<!-- <img src="images/fb-icon.svg" alt="" />-->
<img src="images/tw-icon.svg" alt="" />
<img src="images/yt-icon.svg" alt="" />
<img src="images/insta-icon.svg" alt="" />
<ul class="mobile-footer">
<li>© clipping point 2019
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<div id="bg"></div>
</body>
I think it has something to do with the height of the #page-content div that I have set to min-height: calc(100vh - 138px) to compensate for the navbar at the top and the footer at the bottom.
Alternatively it may have something to do with visibility or positioning on the other elements. The layout of the site changes completely on smaller devices...
I've tried adding -webkit-overflow-scrolling: touch; to various elements, but even when I set it to all elements using * {} it still doesn't scroll.
I've read a dozen posts some of which point to position: fixed so i've tried switching to absolute positioning...
It seems like the whole page tries to scroll instead of the #content or #page-content div... i'm just at a loss! PLEASE HELP!!!

Add below CSS inside #media only screen and (max-width: 800px) in your style.css at line no 4030. It'll unable your parent scroll and disable your individual container scroll and also you add an individual footer in each container. So I also hide all container's footer and visible only last container footer. Try this I hope it'll help you out. Thanks
#ascensorBuilding {
overflow: auto !important;
}
#ascensorBuilding > div {
position: static !important;
overflow: hidden !important;
height: auto !important;
transform: none !important;
}
#ascensorBuilding > div .footer {
display: none;
}
#ascensorBuilding > div:last-child .footer {
display: block;
}

Make dropdown menu in css like in the picture

I have questions about how to reproduce the following:
I have the menu like this:
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</nav>
But, I don't know how to make the drop-down list like the picture shown above.
I hope someone can help me. Thank you in advance!

Hey This is what You want :) I hope
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: red;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 25.6px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: red;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
}
<nav>
<ul class="nav__cat">
<li class="nav__li">Menu 1</li>
<li class="nav__li">Menu 23
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 345
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 4567</li>
<li class="nav__li">Menu 56789</li>
</ul>
</nav>

For starters, you obviously will need some content in each of the menus!
Make sure to open this in the full page.
There is still a lot more styling work that needs to be done to achieve the result you want, but hopefully this helps you get moving in the right direction.
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>

Here a fiddle of improved #Our_Benfactors answer
fiddle
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.active .submenu_group a:after {
background: transparent;
}
.active .submenu_group a {
background:#b42024;
}
.active .submenu_group a:hover {
background: #fff;
color:#000;
border-top: 2px inset #000;
border-bottom: 2px inset #000;
}
.active .submenu_group li:first-child a:hover {
border-top: 0;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
.active .submenu_group li:first-child a {
margin-top: 28px;
}
.active .submenu_group a {
padding: 10px;
}
.active:hover .submenu_group {
display: block;
position: absolute;
background: #000;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>

menu wont show or work

My menu on my page will not work, it is not at all visible. I set it up on a codepen which works fine but now when I have tried to implement it, it failed to work. Where is it?
Still new to coding but would appreciate help.
HTML:
<body>
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>home.</li>
</a>
<a href="#" class="menu-link">
<li>portfolio.</li>
</a>
<a href="#" class="menu-link">
<li>about.</li>
</a>
<a href="#" class="menu-link">
<li>contact.</li>
</a>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".menu-opener").click(function(){
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>
<div class="hero1">
<div id="hero1title"><h1>simplicity, craft and format <br>is what excites me as a designer</h1></div>
</div>
</body>
CSS:
html,body {
padding:0;
margin:0;
height:100%
}
body {
overflow:hidden
}
/*--Homepage*/
p.footertext {
position:absolute;
left:20px;
bottom:10px;
font-size:12px;
z-index:1
}
#media only screen and (max-width : 400px) {
p.footertext {
display:none
}
}
.hero1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: rgb(247,200,198);
}
div #hero1title h1{
color: white;
font-size: 90pt;
position: absolute;
width: 100%;
height: 100%;
top: 30%;
text-align: center;
}
/* Menu styling*/
%transition {
transition: 250ms all;
}
.menu-opener {
background: none;
cursor: pointer;
height: 4rem;
margin: 1rem;
position: absolute;
user-select: none;
width: 4rem;
}
.menu-opener-inner {
background: white;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
#extend %transition;
&::before, &::after {
background: white;
content: '';
display: block;
height: 8px;
width: 2.5rem;
#extend %transition;
}
&::before {
transform: translateY(-.75rem);
}
&::after {
transform: translateY(.25rem);
}
&.active {
background: transparent;
&::before {
transform: translateY(0rem) rotate(-45deg);
}
&::after {
transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
}
}
}
.menu {
background: rgb(152, 211, 189);
height: 100%;
position: absolute;
top: 0px;
user-select: none;
width: 0rem;
z-index: -1;
#extend %transition;
&.active {
width: 100%;
#extend %transition;
& .menu-link {
color: white;
}
}
}
.menu-inner {
display: block;
flex-direction: row;
height: 450px;
list-style-type: none;
margin-top: 15%;
padding: 0;
}
.menu-link {
color: transparent;
display: flex;
flex: 1 1 auto;
font-size: 70px;
font-family: 'Calibre-Semibold';
height: 25%;
text-align: center;
text-decoration: none;
li {
margin: auto;
}
}

I dropped it all into a fiddle, and I find the following things:
The z-index shouldn't be -1
It's there. But you need to highlight it to see it.
The text is styled horribly, so it doesn't look so great.
Your text color in menu-list is set to "transparent".
Your HREFs should be inside the "li" not outside.