Problème menu déroulant horizontale

Bonjour à tous,

j'ai un petit problème avec mon menu déroulant, plus particulièrement avec mon sous menu. Avant mes explications voici mon code HTML:

<div class="menu">
  <nav>
    <ul id="menu_horizontal">
       <li class="menu_2"><a href="#"><span style="font-size:1em">Accueil</span></a></li>
       <li class="menu_2"><a href="#"><span style="font-size:1em">Etaiement</span></a>
          <ul>
            <li class="sous_menu"><a href="#"><span style="font-size: 1em">exemple</span></a></li>
            <li class="sous_menu"><a href="#"><span style="font-size: 1em">c</span></a></li>
          </ul>
        </li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Sécurité</span></a></li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Panneaux de coffrage</span></a></li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Matériel spécifique</span></a></li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Contact</span></a></li>
      </ul>
  </nav>
</div>

et mon CSS:

#menu_horizontal
{
	list-style: none none;
	margin-left: 80px;
	padding: 0;
	line-height: 1;
	font-size: 1.5em;
}
#menu_horizontal a
{
	display: block;
	padding:.5em;
	color: black;
	background: white;
	text-decoration: none;
}
#menu_horizontal a:hover
{
	color: white;
	background: orange;
	text-decoration: underline;
}
.menu_2
{
	float: left;
	position: relative;
}
.sous_menu
{
	display: none;
	position: absolute;
	left: 0;
	top: 2em;
	white-space: nowrap;
	background: white;
	margin-top: -2px;
}
.menu_2:hover .sous_menu
{
	display: block;
}

Mon problème est le suivant: lorsque je survole "etaiement", j'ai normalement deux catégorie qui s'affichent cependant je peux observer qu'elles se superposent. Je pense que c'est à cause du position: absolute. Je n'est pas d'autre solution étant donné que toute ma page se décale si je mets relative. Auriez-vous une solution à ce problème?

Merci d'avance pour vos réponses

A+