Hi,
You have a lot of unneccesary stuff in there and why have you wrapped the lists in divs. You should use nested lists and theres no need to add p tags in there either because they are still lists and should be in list tags.
This works in ie and firefox although I'm not keen on the usuablity of this menu.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
menuHover = function() {
var navRoot = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<navRoot.length; i++) {
navRoot[i].onmouseover=function() {
this.className+=" menuHover";
}
navRoot[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" menuHover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", menuHover);
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<title>Untitled Document</title>
<style type="text/css">
/* CSS Document */
* html a:hover
{
visibility:visible
}
body {
margin: 0;
padding: 0;
}
body, pre, input, textarea, select {
background-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link,
a:active {
color:#99CCFF;
text-decoration: none;
}
a:visited {
color: #1a5180;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#container {
width: 700px;
margin: 20px auto 40px auto;
background-color:#3b7dc2; /* Medium Blue */
}
#banner {
background-image:url(http://www.mikepetruna.com/test/images/mast.jpg);
border-top: 2px solid #3b7dc2; /* Medium Blue */
border-bottom: 2px solid #1a5180; /* Dark Blue */
height: 73px;
position: om
}
#main {
background-color:#3b7dc2; /* Medium Blue */
width:700px;
overflow:hidden;/* clear floats*/
}
#mainText p {
font-size: 11px;
color: #fff;
margin: 10px 20px 5px 20px;
padding: 0px 10px 0px 0px;
}
#main h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
color: #6fa0d2; /* Light Blue */
text-transform: uppercase;
border-bottom: 1px solid #6fa0d2;
margin: 0px 20px 0px 0px;
padding: 20px 10px 0px 20px;
}
#main h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #1a5180;
margin: 0px 20px 0px 0px;
padding: 10px 10px 0px 20px;
}
#content {
float: left;
}
a.content:link,
a.content:active {
font-weight: bold;
color: #CCCC99;
text-decoration: none;
}
a.content:visited {
color:#CCCCCC;
font-weight: bold;
text-decoration: none;
}
a.content:hover {
text-decoration: underline;
font-weight: bold;
}
/* Menu Container */
#menu {
width: 112px;
height: 400px;
background-color: #dbe7f4;
float: right;
}
#menu ul {
padding:0 0 0 2px;
margin:0;
list-style-type: none;
position:relative;
z-index:1
}
#menu li {
position:relative;
float:left;
}
#menu ul li li {
float:none;
}
#menu ul li a{
display:inline;
width:20px;
height:400px;
float:left;
margin-right:2px;
position:relative;
z-index:1
}
#menu ul li ul {
display: none;
padding: 0px;
height:auto;
position:absolute;
border: 2px solid #3b7dc2;
width:150px;
background: #dbe7f4;
z-index: 100;
}
#menu ul li:hover ul, #menu ul li.menuHover ul {
display: block;
top:0;
left:20px;
}
#menu ul li:hover ul li ul,
#menu ul li.menuHover ul li ul {
display: none;
}
#menu ul li:hover ul li a,
#menu ul li.menuHover ul li a {
display: block;
padding: 3px;
color: #660000;
background: none;
height:auto;
}
#menu ul li:hover ul li a:hover,
#menu ul li.menuHover ul li a:hover {
background:#3b7dc2;
color:#33FF99;
}
#menu ul li ul li {
margin-top:0px;
line-height: 17px;
font-size: 13px;
}
/* About Rollover*/
#about a{
background: url(http://www.mikepetruna.com/test/images/aboutSTAT.jpg) no-repeat left top;
}
#about a:hover,#about:hover a,#about.menuHover a{
background: url(http://www.mikepetruna.com/test/images/aboutACT.jpg);
}
/* Fellows Rollover*/
#fellows a {
background: url(http://www.mikepetruna.com/test/images/fellowsSTAT.jpg) no-repeat left top;
}
#fellows a:hover,#fellows:hover a,#fellows.menuHover a{
background: url(http://www.mikepetruna.com/test/images/fellowsACT.jpg);
}
/* Research Rollover */
#research a {
background: url(http://www.mikepetruna.com/test/images/researchSTAT.jpg) no-repeat left top;
}
#research a:hover,#research:hover a,#research.menuHover a {
background: url(http://www.mikepetruna.com/test/images/researchACT.jpg);
}
/* Outreach Rollover */
#outreach a{
background: url(http://www.mikepetruna.com/test/images/outreachSTAT.jpg) no-repeat left top;
}
#outreach a:hover,#outreach:hover a,#outreach.menuHover a {
background: url(http://www.mikepetruna.com/test/images/outreachACT.jpg);
}
/* partners Rollover */
#partners a{
background: url(http://www.mikepetruna.com/test/images/partnersSTAT.jpg) no-repeat left top;
}
#partners a:hover,#partners:hover a,#partners.menuHover a {
background: url(http://www.mikepetruna.com/test/images/partnersACT.jpg);
}
#about {z-index:6;}
#fellows {z-index:5;}
#research{z-index:4;}
#outreach {z-index:3;}
#partners{z-index:2;}
#menu ul li ul li a{
background:none!important;
height:auto;
width:150px;
float:none;
position:relative;
}
/* Footer */
#footer {
clear: both;
margin: 10px 0 0 0;
background-color: #CCCCCC;
border-top: 2px solid #1a5180; /* light Gray */
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #1a5180;
padding: 0px 0px 0px 332px ;
}
#footer a{
background-color: #CCCCCC;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #1a5180;
}
#footer a:link,
#footer a:active,
#footer a:visited {
text-decoration: none;
color:#1a5180;
display:inline;
}
#footer a:hover {
text-decoration: underline;
display:inline;
}
/* Picture alignment */
.picRight {
margin: 0px;
float: right;
}
.picLeft {
margin: 0px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="main"> <img src="http://www.mikepetruna.com/test/images/sakura_pic.jpg" alt="sakura" class="picRight" />
<div id="menu">
<ul>
<li id="about"><a href="#"></a>
<ul>
<li><a href="#">Origins & Objectives</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Locations</a></li>
</ul>
</li>
<li id="research"><a href="#"></a>
<ul>
<li><a href="#">Recent Projects</a></li>
<li><a href="#">Publications & Working Papers</a></li>
</ul>
</li>
<li id="outreach"><a href="#"></a>
<ul>
<li> <a href="#">Fora</a></li>
<li><a href="#">Third Tuesday</a></li>
<li><a href="#">Seminars</a> </li>
</ul>
</li>
<li id="partners"><a href="#"></a> </li>
</ul>
</div>
</div>
</div>
</body>
</html>
Hope it helps 
below is the code:
Bookmarks