Currently, I am working on a static website for my Computer Networks course. Students need to be able to download homework files in PDF format from the website. I have used embed tags to display the files online, but I'm facing an issue where the embedded elements are covering the div tags in the navigation bar. Despite using the z-index css attribute, the problem persists. Is there anyone who can suggest a helpful solution to resolve this? Thank you!
Here is the HTML code for my Navigation Bar:
<div id="Navsun"><a href="NewCourseIntr.html">CourseIntroduction</a>
<div id="secondnav">
<ul id="menu">
<li><a href="Team.html" class="subsun">Team</a></li>
<li><a href="TeachFundation.html" class="subsun">Foundation</a></li>
<li><a href="TeachContent.html" class="subsun">Content</a></li>
</ul>
</div>
</div>
Below is the CSS code being used:
#Navsun:hover #secondnav
{
display:block;
z-index:100;/*change the z-index value to avoid covered by embed or flash element*/
}
The embed element looks like this:
<div id="pdfDiv">
<embed width="99%" height="510px;" src="homework1.pdf" id="PdfShow1" type="application/pdf" style="margin-left:2px;display:block;"/>
</div>
Overview of my HTML file structure:
<!DOCTYPE html>
<html>
<head>
<title>Computer Networks</title>
</head>
<body>
<div id="nav">
<!--Navigation bar is here-->
</div>
<div id="pdfDiv">
<embed width="99%" height="510px;" src="homwork1.pdf" id="PdfShow1" type="application/pdf" style="margin-left:2px;display:block;"/>
</div>
<div id="footer">
</div>
</body>
</html>
The current result appears as follows: