Le menu apparaît/disparaît de manière aléatoire dans IE7

Question

Stumped ... mon menu apparaît environ 25% du temps dans IE7. Cela semble être un problème d'empilement: je peux voir le menu au début mais une fois que l'image d'en-tête et le reste de la page se chargent, elle disparaît. J'ai essayé de placer le z-index dans le menu et ses éléments parents, mais le travail de rien ...

Voici le 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; 
}

Beaucoup de problèmes dans votre code ... beaucoup, les plus importants étant: ne pas abuse XHTML, ne pas utiliser autant de JS (en particulier pour des choses simples comme rounded corners), et - le plus immédiatement pertinent à votre problème - soyez prudent en utilisant position: absolute;.