Having trouble with my menu displaying correctly in IE7. It seems to be a stacking issue: the menu initially appears but disappears once the header image and rest of the page load. I've tried adjusting the z-index values in both the menu and its parent elements, but nothing seems to fix it...
Check out the site here:
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>