I'm a novice in the world of web design. I recently crafted two drop-down menus for my website, one for projects and the other for labs. While the drop-down functionality itself is operational and the links are clickable, they fail to redirect users to the intended pages. Instead, the user remains on the same page. I am uncertain about what aspect of my HTML is causing this issue. You can view my page at:
<nav class="dropdown">
<section class="projects">
<button><h4>Projects</h4></button>
<ul class="projectlist">
<li><a href="projects/project2/index.html"><strong>2: Wireframes & Style Tiles</strong> 10 April 2021</a></li>
<li><a href="projects/project2/index.html"><strong>3: Multi-page Website</strong> 21 May 2021</a></li>
</ul>
</section>
<section class="labs">
<button><h4>Labs</h4></button>
<ul class=lablist>
<li><a href="../index.html.html"><strong>1: Domain Landing Page</strong> 08 March 2021</a></li>
<li><a href="labs/lab2/index.html"><strong>2: Mt. Washington HTML</strong> 15 March 2021</a></li>
<li><a href="labs/lab3/index.html"><strong>3: Mt. Washington CSS</strong> 12 April 2021</a></li>
<li><a href="labs/lab4/index.html"><strong>4: Mt. Washington Table</strong> 17 April 2021</a></li>
<li><a href="labs/lab5/index.html"><strong>5: Responsive Design</strong> 01 May 2021</a></li>
</ul>
</section>
</nav>Here is the snippet from my CSS:
.projectlist {
font-family: Montserrat;
font-weight: 300;
font-size: 10pt;
text-transform: uppercase;
}
.lablist {
font-family: Montserrat;
font-weight: 300;
font-size: 10pt;
text-transform: uppercase
}
.dropdown {
height: 10vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: auto;
}
.projects, .labs {
position: relative;
}
/* Additional styling properties omitted for brevity */