[Solved] drop down menus in IE7 crysis!

Hi guys!

Im new here, i joined because im designing a website for a friend of mine, originally im a graphic designer, but id like to acquire some skills with website design.

So my problem would be the drop down menus, that are not showing when viewed on Internet Explorer 7.

I used a CSS stylesheet to create this menus.

Also, i've been reading that using tables to create layouts is not the best way to design websites hehehe... but i already did it, im planning to change it to DIV's probably or maybe something you would recommend me.

In the meantime i have prioritized fixing the compatibilty issues with IE7, and then later fix the layout.

Another trouble im getting is that the text justifies with a large margin on the right... but this one i think i can fix it by changing the tables based layout

can you take a look to the website and advice me on what to do?

the url is: www.sachayaku.org

thank you very much for your time!

my code:

@charset "utf-8"; /* CSS Document */

body {
margin-top: 0px;
background-image:url(images/background.gif);
background-repeat:repeat-x;
background-color:#281401;
}
body.onload {
onload="MM_preloadImages('images/buttons_sacha_ov.gif','images/buttons_about_p.gif','images/buttons_system_o.gif','images/buttons_art_o.gif','images/buttons_mexico_o.gif')"
}
a {
color:#663300;
text-decoration: none;
}

a:link {
color:#de4900;
}

a:visited {
color: #663300;
}

a:active {
color: red;
}

a:hover {
text-decoration: underline;
}

ul {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
color:#663300;
padding: 0;
margin: 0;
list-style: none;
text-align:center;
vertical-align:middle;
}

li {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
color:#663300;
float: left;
position: relative;
width: 188px;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
border:0;

}

li > ul {
top: auto;
left: auto;
}

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

#mitem {
background-color:#f1d294;
height:25px;
width:188px;
border-bottom:medium;
}
#mitem:hover {
color: #e2c186;
background: #e2c186;
}
.texto {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#663300;
text-align:justify;
}
.titulo {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:bold;
color:#663300;
}

.titles {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #663300;
}

#credits {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#F1D294;
}