Menu déroulant caché par le texte en-dessous

Bonjour,

j'ai inséré en haut de ma page html un menu en ligne (3 items) déroulant au passage de la souris. Des conseils judicieux donnés ici m'ont permis d'y arriver, et cela donne à peu près ceci :

https://jsfiddle.net/vgmcqu6a/19/

Mon problème est que, contrairement à ce qui se passe dans le simulateur, le menu se déroule sous le texte dans la page html. Du coup, je me doute qu'il doit s'agir d'une propriété héritée d'autre chose dans le CSS, mais je ne sais pas de quoi.

Je vous copie ici l'ensemble de mon CSS :

body
{
	background-image: url("portrait_mauve_copie.png");
	background-position: center;
	font-family: Didot, Garamond, Georgia, sans-serif;
}
a
{
	text-decoration: none;
	color: #D9D9D9;
}
h1
{
	font-size: 60px;
	text-align: center;
	margin-top: 30px;
	color: #D9D9D9;
	font-weight: normal;
}
h2
{
	font-size: 50px;
	text-align: center;
	margin-top: 30px;
	color: #D9D9D9;
	font-weight: normal;
}
h3
{
	font-size: 30px;
	text-align: left;
	margin: 30px;
	color: #D9D9D9;
	font-weight: normal;
}
header
{
	width: 100%;
	color: #D9D9D9;
	font-weight: normal;
	text-shadow: 6px 6px 6px black;
}
nav
{
  background-color: #9D8099;
  opacity: 0.8;
}
nav a
{
  text-decoration: none;
  color: #FFFFFF;
}
nav ul
{
  text-align: center;
  font-size: 30px;
  color: #D9D9D9;
  text-shadow: 6px 6px 6px black;
  line-height: 40px;
  list-style-type: none;
}
nav li
{
	position: relative;
	display: inline;
	width: 90%;
	height: 40px;
}
nav ul ul
{
  z-index: 4;
  display: none;
  font-size: 25px;
  text-align: center;
}
nav ul ul li
{
	display: block;
}
li:hover ul.menu2
{
  z-index: 4;
  display: block;
}
.menu2 
{
  z-index: 4;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #9D8099;
}
section
{
	z-index: 1;
	font-size: 20px;
	color:#FFFFFF;
	width: 90%;
	margin-left: 50px;
	margin-right: 50px;
	text-align: justify;
}
.center
{
	text-align: center;
}
em
{
	font-style: italic;
}
strong
{
	font-style: bold;
	font-style: italic;
}
footer
{
	width: 90%;
	margin: 50px;
	font-size: 20px;
	color: #D9D9D9;
	font-weight: normal;
}

Merci d'avance de votre aide !