How can I make my anchor tags/links work properly on a header with a video in the "background" and a menu on top?
HTML
<nav class="menu">
<a href="#" target="_blank">ABOUT</a>
<a href="#" target="_blank">PRICES</a>
<a href="#" target="_blank">CONTACT</a>
</nav>
<div class="video-container">
<video class="video-tablet" autoplay loop>
<source src="videos/SampleVideo_720x480_1mb.mp4" type="video/mp4">
<source src="videos/SampleVideo_720x480_1mb.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
CSS
.video-tablet {
display: flex;
width: 100%;
}
.menu {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
padding: 1%;
position: absolute;
}
.menu a {
color: white;
font-size: 20px;
font-weight: bold;
}
.menu a:hover {
color: #559565;
}