sub-menu sendo sobreposto

Bom pessoal eu tinha feito um menu com sub-menu ai

eu fiz uma div embaixo mal sabia eu que meu menu ia ser

sobre posto:

Antes: http://prnt.sc/f4x473

Depois: http://prnt.sc/f4x3qg

CSS

/* SUB-MENU

.menu ul li ul li {margin-right: 0px;}
.menu li ul {position: absolute; top: 60px; left: 0; background-color: #f1f1f1; box-shadow: 2px 2px 1px #ccc; display: none;}
.menu ul li ul li {display: block; width: 230px;}
.menu ul li ul li a {font-size: 1.1em; color: #282828;}

.menu li:hover ul, .menu li.over ul {display: block;}

#hr-1 {color: #f1f1f1; border: 1px solid; margin-top: 57px;}
#hr-1 {box-shadow: -1px 1px 1px #c0c0c0;}

/ MAIN /

/ REVENDEDOR /
.revendedor {position: relative; background-image: url(../img/fundo1.png); width: 100%; height: 290px; margin-top: 0px;}

.revendedor h1 {position: relative; font-family: Verdana, sans-serif; color: #222; font-size: 1.4em; font-weight: bold;
text-align: center; padding-top: 45px;}

.revendedor p {position: relative; font-size: 1.2em; font-family: Verdana, sans-serif; color: #222; text-align: center;
padding-top: 5px;}

.revendedor i {position: relative; padding-left: 47%; padding-top: 20px; color: #222; margin-bottom: 15px;}

.revendedor a {width: 120px; height: 40px; font-size: 1.2em; font-weight: bold; background-color: #0294c4; color: #fff;
border-radius: 5px; padding: 5px; margin-left: 46.2%; cursor: pointer;}

.hr-2 {border: 0.5px ridge #0294c4; margin-top: 3px; width: 35em; margin-left: 29.7%;}

.revendedor a:hover {background-color: #1E9FFF;}

Oque eu faço galera?