Sovrapposizione menu e footer

[Eleonora087]

Salve a tutti!
Siamo nuovi con il CSS e stiamo provando a fare una pagina per un progetto universitario.
Abbiamo creato un menu a tendina basato su una lista (<ul>) e per permettere alle varie voci di affiancarsi orizzontalmente abbiamo attivato il float ad un certo livello della lista. Fatto questo abbiamo aggiunto un footer sotto al menu, ma questo risulta sovrapposto al menu stesso. Abbiamo provato a mettere "clear:left;" sul footer, ma senza risultato.
Lasciamo qui sotto il codice CSS del menu a tendina:

#main_menu_nav {
	/*height: 40px;*/
	width: 98.5%;
	color: #800000;
	font-family: "Segoe Print";
	font-size: 10.5;
	font-weight: bold;
	background-color: #FFC0CB;
	text-align: center;
	padding: 0;
	margin: 0;
}

#main_menu_nav ul, #main_menu_nav ul ul {
	padding: 0;
	margin: 0;
	list-style: none;
	clear: left;
}

#main_menu_nav ul li a {
	display: block;
	/*height: 40px;*/
	width: 100%;
	border: 1px solid #800000;
	font-weight: bold;
	font-size: 10.5;
	color: #800000;
	vertical-align: middle;
	z-index: 10;
	text-decoration: none;
}

#main_menu_nav ul li ul li a {
	display: block;
	/*height: 30px;*/
	border: 1px;
	font-weight: bold;
	font-size: 10px;
	color: #CC3300;
	line-height: 2;
	z-index: 10;
	text-decoration: none;
}

/*QUI*/
#main_menu_nav ul li {
	position: relative;
	float: left;
	width: 9.08%;
	z-index: 10;
}

#main_menu_nav ul li ul {
	display: none;
	position: absolute;
	width: 100%;
	left: 1px;
	top: 42px;
	background-color: #FFCCCC;
	z-index: 10;
}

#main_menu_nav ul li:hover ul {
	display: block;
	z-index: 10;
}

#main_menu_nav ul li ul li {
	text-align: align;
	width: 100%;
	z-index: 10;
}

#main_menu_nav ul li ul li a:hover {
	background-color: #CC3366;
	color: #FFFFFF;
	z-index: 10;
}

Vi ringraziamo per l'aiuto!

[Eleonora087]

Dimenticavo l'HTML:

<div id = "main_menu_nav">
			<ul>
				[*]Recipes
					<ul>
						[*]All the recipes		
						[*]Chef's suggestions
						[*]Video recipes
						[*]Complete meals
						[*]By course
						[*]By holiday
					[/list]
				
				[*]Dealers
					<ul>
						[*]All the dealers		
						[*]By state
					[/list]
				
				[*]Ingredients
					<ul>
						[*]All the ingredients		
						[*]By type
					[/list]
				
				[*]Italian producers
				
				[*]Production places
					
				[*]Equipment
				
				[*]Why tasty?
				
				[*]Why healthy?
				
				[*]Why inexpensive?
				
				[*]Subscribe newsletter
				
				[*]Italian food usage
				
			[/list]
		</div>

[apprentice]

ciao, sono nuovissimo di queste cose, ma credo che il problema stia ne non dare l'attributo position corretto alla barra o al footer.
provo a esporre come lo farei io:

html

<div id"conenitore">
<div id"navigazione">blablabla</div>
<div id"footer">bla</div>
</div>

css

#contenitore
position:absolute
margin: 0 auto 0 auto (per centrarlo se volete)

#navigazione
position:relative

#footer
position:relative

spero nn sia sbagliato
ciao!