css - 菜单在 IE7 中随机出现/消失

Question

难住了...我的菜单在 IE7 中大约有 25% 的时间显示。这似乎是一个堆叠问题:起初我可以看到菜单，但是一旦加载了标题图像和页面的其余部分，它就会消失。我已经尝试在菜单及其父元素中设置 z-index，但没有任何效果...

这是网站:http://www.hospiceofmissoula.com

html {
    height:100%;
}

body, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
}

body {
    behavior:url("csshover3.htc");
    font-size:14px;
    font-family:Georgia, "Times New Roman", Times, serif;
    background-color:#bacddb;
    height:100%;
}

h1 {
    font-size:18px;
    color:#752eca;
    text-decoration:none;
}

h2 {
    font-size:14px;
    color:#909090;
    text-decoration:none!important;
}

h3 {
    color:#4d2288;
    font-size:18px;
}

p {
    text-indent:20px;
    color:#000;
}

p a {
    color:#000;
    text-decoration:underline;
}

p.foot {
    text-indent:0px;
}

p.link {
    font-size:18px;
    color:#30F;
    text-decoration:underline!important;
}

a {
    color:#4d2288;
    text-decoration:none;
    outline:none;
}

a:visited {
    color:#4d2288;
}

p a:hover {
    text-decoration:underline!important;
}

label {
    text-align:left;
}

ul#nav {
    padding:5px;
    margin:0px auto;
    width:100%;
    z-index:999;
}

ul#nav li a {
    display:block;
    font-weight:bold;
    padding:2px 10px;
    background:#bacddb;
}

ul#nav li a:hover {
    background:#d9c3f2;
    color:#4d2288;
}

li {
    list-style:none;
    float:left;
    position:relative;
    width:225px;
    text-align:center;
    margin:0px auto;
    margin-right:4px;
    border:1px solid #4d2288;
}

li ul {
    display:none;
    position:relative;
    width:auto;
    top:0;
    left:0;
    margin-left:-1px;
}

li>ul {
    top:auto;
    left:auto;
    border:none;
}

li:hover ul {
    display:block;
}

ul#nav li.current a {
    background:#bb96e4;
}

ul#nav li.current a:hover {
    background:#d9c3f2;
}

<div id="maincontent">
<div id="header">
    <div id="lyr_ddmenu">
        <ul id="nav">
            <li class="current"><a href="index.html" title="Home">Hospice of Missoula</a>
        <ul class="sub">
            <li><a href="charitycare.html" title="Charity">Charity Care</a></li>
            <li><a href="history.html" title="History">History</a></li>
            <li><a href="missionstatement.html" title="Mission Statement">Mission Statement</a></li>
            <li><a href="services.html" title="Services">Services</a></li>
            <li><a href="staff.html" title="Staff">Staff</a></li>
        </ul></li>
            <li><a href="whatishospice.html" title="What is Hospice?">What is Hospice?</a>
        <ul class="sub">
            <li><a href="faq.html" title="Frequently Asked Questions">Frequently Asked Questions</a></li>
            <li><a href="eolinfo.html" title="End-of-Life Information">End-of-Life Information</a></li>
            <li><a href="advanceddirectives.html" title="Advanced Directives">Advanced Directives</a></li>
            <li><a href="helpfullinks.html" title="Helpful Links">Helpful Links</a></li>
        </ul></li>
            <li><a href="volunteering.html" title="Volunteering">Volunteering</a></li>
            <li><a href="contactus.html" title="Contact Us">Contact Us</a>
        <ul class="sub">
            <li><a href="calendar.html" title="Upcoming Events">Upcoming Events</a></li>
            <li><a href="employment.html" title="Employment">Employment</a></li>
        </ul></li>
        </ul>
</div>

Answer 1

#header {
    padding-top: 160px !important;
}
#lyr_ddmenu {
    margin: 0 auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
}
.colmask {
    margin-top: 20px !important;
}

你的代码中有很多问题......很多，更重要的是:不要abuse XHTML ，不要使用太多 JS(特别是对于像 rounded corners 这样简单的事情)，并且 - 与您的问题最直接相关 - 小心使用 position: absolute;。