Trying to work on a dropdown menu here. It appears to be functioning, but there's a small issue - the dropdown shows up on the right side of the element instead of directly below it. I have a feeling it has to do with either position or padding, but I haven't been able to pinpoint the exact cause. Appreciate any help on this as I'm still learning CSS and every bit of guidance counts!
HTML
<nav id="navigatie" class="nav">
<ul>
<li><a class="active" href="index.html">Home</a>
<li><a href="html/producten.html">Producten</a></li>
<li><a href="html/personaliseren.html">Personaliseren</a></li>
<li><a>Over ons</a>
<ul>
<li><a href="html/blog.html">Blog</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/faq.html">FAQ</a></li>
</ul>
</li>
</ul>
</nav>
CSS
html {
background: #936A4A;
}
nav {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #F5F5F5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul li {
width: 25%;
}
ul li > ul {
display: none;
flex-direction: column;
}
ul li:hover > ul {
display: flex;
flex-wrap: wrap;
}
ul li > ul li {
width: 100%;
height: 100%;
}
li {
display: flex;
flex: auto;
}
li a {
color: #B85750;
text-decoration: none;
}
.active {
pointer-events: none
}