I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these things yet. It's holding me back from progressing with my website, so any assistance would be greatly appreciated!
{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: "Poppins", sans-serif;
}
.wrapper {
background: #171c24;
position: fixed;
width: 100%;
}
.wrapper nav {
position: relative;
display: flex;
max-width: calc(100% - 200px);
margin: 0 auto;
height: 70px;
align-items: center;
justify-content: space-between;
}
nav .content {
display: flex;
align-items: center;
}
nav .content .links {
margin-left: 80px;
display: flex;
}
.content .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
}
content .links li {
list-style: none;
line-height: 70px;
}
content .links li a,
.content .links li label {
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 9px 17px;
border-radius: 5px;
transition: all 0.3s ease;
}
.content .links li label {
display: none;
}
content .links li a:hover,
content .links li label:hover {
background: #323c4e;
}
...
<div class="wrapper">
<nav role="navigation">
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<div class="logo"><a href="Home.html">GameRelease</a></div>
<ul class="links">
<li><a href="Home.html">Home</a></li>
<li><a href="latest games.html">Latest games</a></li>
<li><a href="#"></a> </li>
...
</form>
</nav>
</div>