CSS dropdown menu remaining visible in Chrome, IE - css

Question

I'm hoping someone might be able to help me with this. It looked fine in the preview mode of my program. However, when I opened it in IE and Chrome, the dropdown remains dropped at all times. I'm guessing it's a simple solution to fix it, but I have been staring at this screen for too long. To see what I'm talking about, please see the picture below.
http://img.photobucket.com/albums/v299/insane43/DropdownError_zpsa3e89f8a.jpg
CSS
body {
background: #eaeff2 url("BG Top.jpg") repeat-x right top }
.menu {
background-color: #97a7b7;
font-family: times;
color: #ffffff;
line-height: 50px;
text-align: center;
margin: 0px auto;
display: block}
.menu ul li:hover > ul {
display: block;
width: auto;}
.menu li:hover ul {
position: absolute;
display: block;
left: auto; }
.menu ul {
margin: 0px auto;
padding: 0;
display: inline-block;
text-align: center;
list-style-type: none; }
.menu ul ul{
background: #eaeff2;
top: 100%;
position: absolute}
.menu ul ul li {
float: none;
position: relative;
background-color: #97a7b7}
.menu li {
float: left;
position: relative:
width: 98%:}
.menu li ul {
display: none; }
.menu a:link, a:visited {
display: block;
height: 50px;
margin-left: 30px;
margin-right: 30px;
font-family: times;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
text-decoration: none }
.menu a:hover, a:active {
background-color: #4f5963;
text-decoration: none }
.header {
font-family: times;
color: #ffffff;
font-size: 40px;
vertical-align: middle }
.frame {
width: 98%;
text-align: center;}
iframe {
overflow: hidden;
border: 0px;
padding: 0px;
margin: 0px }
.header img {
vertical-align: middle}
.petpics img {
opacity: 0.7;
filter: alpha(opacity=70);}
HTML
<div id="header" class="header" style="position: absolute; top: 0px; text-align: center; width: 100%"><img height="140px" src="Logo.png">&nbsp&nbsp&nbsp<span class="petpics" class="petpics"><img height="194px" src="Lily.jpg"><img height="194px" src="Annie.jpg"><img height="194px" src="Smoki.jpg"></span></div>
<div id="menu" class="menu" style="position: absolute; top:194px; left:0px; text-align: center; width: 100%; z-index:1"><center>
<ul>
<li>Home</li>
<li>About</li>
<ul>
<li>Our Board</li>
<li>Our Staff</li>
</ul>
<li>Adopt</li>
<ul>
<li>Cats</li>
<li>Dogs</li>
</ul>
<li>Lost Pets</li>
<ul>
<li>Lost</li>
<li>Found</li>
</ul>
<li>Volunteer</li>
<ul>
<li>Become a Volunteer</li>
<li>Volunteer Login</li>
</ul>
<li>How to Help</li>
<ul>
<li>Membership</li>
<li>Donate</li>
<li>Upcoming Events</li>
</ul>
<li>Education</li>
<ul>
<li>Information</li>
<li>Educational Events</li>
</ul>
</ul>
</center>
</div>
<div id="frame" class="frame" style="position: absolute; top: 280px; width: 98%; height: 100%; z-index:0">
<iframe name="display" width="100%" height="100%" overflow="visible" scrolling="hidden" seamless="seamless" border="0" margin="0" src="Home.html">
</iframe>
</div>
Thank you! Your help is appreciated. Edited to add full code.