Why are my links in html ul li not working? - html

Question

I'm currently trying to build my first website (homework). For my dropdown menu, I used Dev Ed's tutorial for a dropdown menu, and it is working except that I can't click on the links in the dropdown bits.
(the mouse coursor still changes into that hand-symbol though)
How can I fix this?
nav {
grid-column: 1/5;
background: #2E3045;
justify-content: center;
border-radius: 10px;
}
nav a,
button {
text-decoration: none;
font-size: 1.7vw;
font-family: Bahnschrift, sans-serif;
color: #DFB830;
font-weight: bold;
}
/* horizontal-menu */
.menu {
height: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
/* styling horizontal-menu buttons */
.dropdown button,
.dd-buttons {
background: none;
border: none;
cursor: pointer;
text-transform: uppercase;
padding-top: 1%;
padding-bottom: 1%;
}
.menu button:hover,
.dd-buttons:hover {
color: #ECEEFF;
}
/* styling the dropdown arrow */
#media only screen and (max-width: 480px) {
.menu img {
max-width: 7px;
height: auto;
display: inline-block;
}
}
#media only screen and (min-width: 481px) {
.menu img {
max-width: 15px;
height: auto;
display: inline-block;
}
}
/* dropdown list */
.dropdown {
position: relative;
}
.dropdown ul {
position: absolute;
background: #DFB830;
margin-top: 8px;
min-width: 150%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
transform: translateY(10px);
}
/* styling dropdown menu list items */
.dropdown li {
width: 100%;
height: 100%;
line-height: 250%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.4s ease;
}
.dropdown a {
font-size: 1.5vw;
color: #2E3045;
}
/* when hovering over dropdown list */
.dropdown li:hover {
background-color: #E9CF72;
}
.dropdown button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
<!------------------------ menu ------------------------>
<nav>
<div class="menu">
<button class="dd-buttons">YouthDuo</button>
<button class="dd-buttons">Galactic Spirit</button>
<div class="dropdown">
<button>Feng Shui <img src="images/dropdown icon.png"></button>
<ul>
<li>Feng Shui Basics</li>
<li>CD's and DVD's</li>
<li>Books and EBooks</li>
</ul>
</div>
<div class="dropdown">
<button>Color Alchemy <img src="images/dropdown icon.png"></button>
<ul>
<li>Living in Color</li>
<li>Guided Training</li>
<li>Jami Lin's Products</li>
</ul>
</div>
</div>
</nav>

Answer 1

remove the pointer-events:none
.dropdown ul {
position: absolute;
background: #DFB830;
margin-top: 8px;
min-width: 150%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
opacity: 0;
transition: all 0.4s ease;
transform: translateY(10px);
}