CSS Menu Trouble

[TJ111]

I'm making a standard drop-down based menu, but for once I wanted to try and write the whole thing in CSS and HTML with no javascript. However for some reason no matter what I can't get the sub menu to appear at all. Just wondering if someone else can peek at me code, see if they notice anything I didn't. I apologize in advanced about the code, its a mess, I've been trying a million different things.

CSS

/*NAV MENU*/
#navBars {
height:60px;
background:#fff;
width:100%;
padding:0;
margin:0;
}
#mainMenu {
margin:0;
padding:0;
width:100%;
height:25px;
background-color:#fff;
text-align:center;
border-bottom:1px solid;

}
#mainMenu ul {
list-style-type: none;
display:block;
float:left;
width:700px;
margin:3px 0px 3px 50px;
padding:0;
}
#mainMenu li {
padding: 0;
margin: 0;
float: left;
display: block;
padding-top:3px;
}
/*second menu*/
#mainMenu ul ul {
display:none;
margin-left:0px;
padding:0;
position:absolute;
top:55px;
left:0;
height:20px;
width:100%;
background:#fff;
}

/*First*/
#mainMenu li a, #mainMenu li a:visited {
color:#54494e;
text-decoration: none;
text-align:left;
padding-left:30px;
padding-right:20px;
display:block;
float:left;

}
#mainMenu li:hover, #mainMenu li a:hover {
cursor: pointer;
background-image: url(/images/summLogosmallH.jpg);
background-repeat: no-repeat;
background-position:5px;
color:#000;
}
#mainMenu li a:active {
cursor:pointer;
color:#000;
background-image: url(/images/summLogosmallA.jpg);
background-repeat: no-repeat;
background-position:5px;
}
#mainMenu li a.selected {
cursor:pointer;
color:#000;
background-image: url(/images/summLogosmallA.jpg);
background-repeat: no-repeat;
background-position:5px;
}
#mainMenu ul ul a:hover {
#color:#000;
}

#mainMenu li a:hover ul {
display: block;
z-index: 6000;
}


#mainMenu li ul a {
display: block;
float: left;
font-weight: normal;
padding: 0 10px 0 0;
background: none;
height: 25px;
line-height: 25px;
}



And how I'm calling it right now:

<div id='navBar'>

<div id='mainMenu'>
<ul>
<li><a href='/?pageid=0' <?php echo $menu[0];?>>HOME</a></li>
<li><a href='/?pageid=1' <?php echo $menu[1];?>>NEWS</a></li>
<li><a href='/?pageid=2' <?php echo $menu[2];?>>PRODUCTS</a></li>
<li><a href='/?pageid=3' <?php echo $menu[3];?>>PURCHASE</a></li>
<li><a href='/?pageid=4' <?php echo $menu[4];?>>COMPANY</a></li>
<ul>
<li>Who We Are</li>
<li>Where We've Been</li>
<li>Where We're Going</li>
</ul>
<li><a href='/contactSummit.php?pageid=5' <?php echo $menu[5];?>>CONTACT</a></li>
</ul>

</div>

<div id='newsBar'>
<p>Website Under Construction. <a href='/contactSummit.php'>Contact us</a></p>
</div>



</div>


Thanks

[TJ111]

#mainMenu li:hover ul {
display: block;
z-index: 6000;
}
Adding that and I can get it to display in IE 7, but nothing else.

[sticks464]

Try this in your html
<div id='navBar'>
<div id='mainMenu'>
<ul>
<li><a href='/?pageid=0' <?php echo $menu[0];?>>HOME</a></li>
<li><a href='/?pageid=1' <?php echo $menu[1];?>>NEWS</a></li>
<li><a href='/?pageid=2' <?php echo $menu[2];?>>PRODUCTS</a></li>
<li><a href='/?pageid=3' <?php echo $menu[3];?>>PURCHASE</a></li>
<li><a href='/?pageid=4' <?php echo $menu[4];?>>COMPANY</a>
<ul>
<li>Who We Are</li>
<li>Where We've Been</li>
<li>Where We're Going</li>
</ul>
</li>
<li><a href='/contactSummit.php?pageid=5' <?php echo $menu[5];?>>CONTACT</a></li>
</ul>
</div>
<div id='newsBar'>
<p>Website Under Construction. <a href='/contactSummit.php'>Contact us</a></p>
</div>
</div>

[TJ111]

Haha I can't believe I didn't notice that. Thanks alot, you saved the day.