我希望有人可以帮我这个。它在我的程序的预览模式下看起来很好。但是,当我在IE和Chrome中打开它时,下拉列表始终保持不变。我猜这是解决它的简单解决方案,但我一直盯着这个屏幕太久了。要了解我在说什么,请参阅下面的图片。
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">   <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><a href="Home.html" target="display">Home</a></li>
<li><a href="About.html" target="display">About</a></li>
<ul>
<li><a href="Cats.html" target="display">Our Board</a></li>
<li><a href="Dogs.html" target="display">Our Staff</a></li>
</ul>
<li><a href="Adopt.html" target="display">Adopt</a></li>
<ul>
<li><a href="Cats.html" target="display">Cats</a></li>
<li><a href="Dogs.html" target="display">Dogs</a></li>
</ul>
<li><a href="Lost and Found.html" target="display">Lost Pets</a></li>
<ul>
<li><a href="Cats.html" target="display">Lost</a></li>
<li><a href="Dogs.html" target="display">Found</a></li>
</ul>
<li><a href="Volunteer.html" target="display">Volunteer</a></li>
<ul>
<li><a href="Cats.html" target="display">Become a Volunteer</a></li>
<li><a href="Dogs.html" target="display">Volunteer Login</a></li>
</ul>
<li><a href="Volunteer.html" target="display">How to Help</a></li>
<ul>
<li><a href="Cats.html" target="display">Membership</a></li>
<li><a href="Dogs.html" target="display">Donate</a></li>
<li><a href="Dogs.html" target="display">Upcoming Events</a></li>
</ul>
<li><a href="Volunteer.html" target="display">Education</a></li>
<ul>
<li><a href="Cats.html" target="display">Information</a></li>
<li><a href="Dogs.html" target="display">Educational Events</a></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>
谢谢!非常感谢您的帮助。编辑添加完整代码。