Need some help with a menubar

Alright, so I have this wonderful menu on my webpage ([url]www.marconid.com[/url]) however it doesn’t work in IE. Works in FF, but not IE. I was told that I would need to implement some javascript to make it work, however I don’t know what to put where.

I’m still very, very new to javascript, so if you just want to tell me, that would be good, or if you knew some tutorials that would help me, that would be good to.

I tried to make it out of HTML and CSS as much as possible, since that is what I know and love. If it will help, here’s my CSS:

[code]
body {

background: #E8E8E8;
font: 16px Verdana, sans-serif;
}

body{
margin: 0px auto;
background-image: url(pictures/crackback.gif);
/* repeat-y will only repeat down the left side of the page */
background-repeat:repeat-y;
}
#left {
position: absolute;
width: 147px;
background-image: url(Pictures/crackback.gif);
float: left;
margin-right: 20px;
height: 100%;
}
#content{
margin: 0px 0px 0px 150px;
padding: 0 10px 10px;
}

#right {
width: 75%;
float: right;
}
a:link {color: #104E8B;
text-decoration: none;
background-color: transparent }
a:visited { color: #4169E1;
text-decoration: none;
background-color: transparent }
a:hover { color: #00066;
text-decoration: underline;
background-color: transparent }
a:active { color: #A9ACB6;
text-decoration: underline;
background-color: transparent }
.title { text-align: center}
.floaty {
float: right;
padding:5px;
}
td{
font: 12px Verdana, sans-serif;
border-right:1px solid #000000;
}
.tableend{
font: 14px Verdana, sans-serif;
border: none;
}
#good {
text-align:center;
}

#navlist
{
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 146px
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

.photos {border: none;}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
img {
border: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #000066;
color: #FFF;
background: #4169e1;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 146px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 146px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }

#elaine
{
text-align: center;
width:169;
}

/* Fix IE. Hide from IE Mac */
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

[/code]

Also in #JavaScript _↴