菜单在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; 
}

很多问题在你的代码...更重要的是：不要使用太多的JS（特别是对于简单的东西，比如rounded corners），并且 - 与您的问题最直接相关 - 请注意使用position: absolute;。