I have successfully implemented dropdown navigation with absolute positioning, but it is causing the left side to squash and the content above it to be hidden behind the navigation.
Is there a way to prevent my navigation from overlapping other content when using the position:absolute property? Since my nav elements are defined in CSS, using an invisible <div> is not a viable solution.
The HTML in my header.php file looks like this:
<center><nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/arcade">Arcade</a>
<ul>
<li><a href="/arcade/action">Action</a></li>
<li><a href="/arcade/arcade">Arcade</a></li>
<li><a href="/arcade/puzzle">Puzzle</a></li>
<li><a href="/arcade/vehicle">Vehicle</a></li>
<li><a href="/arcade/violence">Violence</a></li>
<li><a href="/arcade/defense">Defense</a></li>
<li><a href="/arcade/rpg">RPG</a></li>
</ul>
</li>
<li><a href="">Watch</a>
<ul>
<li><a href="/watch/tv">TV Shows</a></li>
<li><a href="/watch/movies">Movies</a></li>
</ul>
</li>
<li><a href="">Extras</a>
<ul>
<li><a href="/reviews">Reviews</a></li>
<li><a href="/news">Updates</a></li>
</ul>
</li>
<li><a href="/support">Support</a></li>
</ul>
</nav></center>
Initially, the CSS for the navigation looked like this:
nav{
background-color:#989898;
margin: 0px -12.5%;
}
After adding positioning, the CSS now looks like this:
nav{
background-color:#989898;
margin: 0px -12.5%;
position:absolute;
z-index:1000;
}
You can visit my website at www.gameshank.com/ for reference!
Any suggestions or solutions would be greatly appreciated! Thank you!