I've been struggling with the layout of my website due to issues with the positioning of my div tags. Whenever I hover over the arcade tab or other drop-down menus, they end up behind the div for my movies. I would like to reverse this behavior so that the tabs overlay the divs instead. Any advice on how to achieve this?
Below is the CSS code I have been using:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
...
This is the section of HTML where the overlap is happening:
<div id="text"><h1>Featured!</h1></div>
<div id="boxed">
<div id="movie">Ghost Shark</br><img src="/movies/posters/Ghost Shark.jpg"></div>
</div>
And here is the HTML for my navigation panel:
<center><nav>
<ul>
<li><a href="/">Home</a></li>
...
You can visit the webpage at to see the issue firsthand.
Thank you in advance for your help!