Menu appears/disappears randomly in IE7

Question

Stumped...my menu shows up about 25% of the time in IE7. It appears to be a stacking issue: I can see the menu at first but once the header image and the rest of the page loads, it disappears. I've tried setting the z-index in both the menu and its parent elements, but nothing's working...

Here's the site: 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;
}

A lot of problems in your code... a lot, the more important ones being: don't abuse XHTML , don't use so much JS (particularly for simple things like rounded corners ), and — the most immediately relevant to your problem — be careful using position: absolute; .