HTML Drop down menu hidden by image - html

Question

I have a website home page which has a menu (with a drop down) than an image (with text overplayed). For whatever reason the image is floating above the menu, so when you hover on the drop down it hides the menu behind the image.
HTML
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f3f3;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
}
nav p {
font-family: arial;
color: #222;
font-size: 22px;
line-height: 55px;
float: left;
padding-left: 20px;
}
nav ul li {
list-style: none;
float: left;
position: relative;
text-transform: uppercase;
}
nav ul li a {
display: block;
padding: 21px 14px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li img {
float: right;
width: 8px;
padding-left: 6px;
position: relative;
top: 5px;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
clear: both;
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
display: block;
padding: 11px 10px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li ul li:hover {
background-color: #eee;
}
.wrapper {
padding: 0px 0px
}
.search form {
list-style: none;
float: right;
position: relative;
padding-top: 8px;
padding-right: 20px;
}
.search input[type=text] {
width: 132px;
box-sizing: border-box;
border: 0.5px solid #ccc;
border-radius: 2px;
font-size: 16px;
background-color: white;
background-image: ('img/searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}
.search input[type=text]:focus {
width: 300px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
} here
<header>
<nav>
<p>Website Name</p>
<ul>
<li>Home</li>
<li>Resources <img src="img/dropdown.png">
<ul>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
</ul>
</li>
<li>Login</li>
</ul>
<div class="search">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</nav>
</header>
<p style="line-height:400%"> </p>
<section>
<div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
<h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
</div>
</section>

Answer 1

Use z-index for making the dropdown above the image.An element with greater z-index will be on the top of that with lower z-index
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f3f3;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
}
nav p {
font-family: arial;
color: #222;
font-size: 22px;
line-height: 55px;
float: left;
padding-left: 20px;
}
nav ul li {
list-style: none;
float: left;
position: relative;
text-transform: uppercase;
}
nav ul li a {
display: block;
padding: 21px 14px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li img {
float: right;
width: 8px;
padding-left: 6px;
position: relative;
top: 5px;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
clear: both;
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
display: block;
padding: 11px 10px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li ul li:hover {
background-color: #eee;
}
.wrapper {
padding: 0px 0px
}
.search form {
list-style: none;
float: right;
position: relative;
padding-top: 8px;
padding-right: 20px;
}
.search input[type=text] {
width: 132px;
box-sizing: border-box;
border: 0.5px solid #ccc;
border-radius: 2px;
font-size: 16px;
background-color: white;
background-image: ('img/searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}
.search input[type=text]:focus {
width: 300px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
} here
<header>
<nav>
<p>Website Name</p>
<ul>
<li>Home</li>
<li>Resources <img src="img/dropdown.png">
<ul>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
</ul>
</li>
<li>Login</li>
</ul>
<div class="search">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</nav>
</header>
<p style="line-height:400%"> </p>
<section>
<div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
<h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
</div>
</section>