CSS下拉菜单在Chrome,IE中仍然可见

时间:2014-12-06 16:56:28

标签: css drop-down-menu

我希望有人可以帮我这个。它在我的程序的预览模式下看起来很好。但是,当我在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">&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><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>

谢谢!非常感谢您的帮助。编辑添加完整代码。

0 个答案:

没有答案