Drop down menu hidden behind background image - html

Question

I have asked everyone I know, and I've searched this site too, but no luck. Now I'm asking all of you for help. I am using HTML5 and CSS3 to make my second website. (First one was 7 years ago, looks terrible now!)
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image and any other content on the page. I have tried using the z-index in every possible place (with a position marking) and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the NavBar HTML Code:
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gigs</li>
<li>Groups
<ul>
<li>SB Trio</li>
<li>NYGT</li>
<li>Qtto Bloomdido</li>
</ul>
</li>
<li>Publications</li>
<li>Repairs</li>
<li>Lessons</li>
<li>Contact</li>
</ul>
</div>
Here's the CSS from the NavBar:
#nav { position: relative;
top: 0;
text-align: center;
background-color: #FF9933;
background-image: url(images/WoodAfromosia.jpg);
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 130%;}
#nav ul { list-style: none;
padding: 1;
margin: 0% 0% 0% 0%;}
#nav ul li { float: center;
display:inline-block;
font-weight: bold;
text-transform: uppercase;}
#nav { overflow: hidden; width: 100%;}
#nav ul li a {display: inline-block;
padding: .5em;
background-color: peachpuff;
background-image: url(images/Paperpapyrus.jpg);
border: 2px solid #000;
border-radius: .5em;
margin: 3% 6% 3% 6%;
white-space:nowrap;}
#nav ul ul {display: none;}
#nav ul ul li {display: block;
float: left;
text-align: left;
margin: -6.5% 0% 0% -40% ;
width: 100px;}
#nav li:hover ul { position:absolute; /* Position under correct tab */
display:block;}
#nav li:hover li { float:none;
overflow: visible;}
#nav ul a:link { color: black; }
#nav ul a:visited { color: black; }
#nav ul a:focus { color: blue;
border-color: #fff; }
#nav ul a:hover { color: darkviolet;
border-color: #fff; }
#nav ul a:active {color: cyan; }
Here's the CSS from the Background Image and Intro Image just below the NavBar:
body { position: relative;
padding: 0;
margin: 0;
background-color: azure;
background-image: url(images/Paperwhitebricks.jpg);}
a {text-decoration: none;}
#intro {text-align: center;
margin: -1% 0% -.5% 0%;}

Answer 1

remove overflow:hidden from the #nav it will fix the issue
#nav {
overflow:hidden /* remove */
width: 100%;
}
here is the fiddle
JS Fiddle