Drop Down not even showing up in IE6
- by blackessej
I've got a drop down menu here that just plain won't show up in IE6. The site works perfectly in every other browser. Seems daft to lose sleep over IE6, I know, but the site is for a demographic who could very well still be using it.
Here's the CSS:
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:Arial, Helvetica, sans-serif;
background-color:#d3d3d3;
height:100%;
}
h1 {
font-size:18px;
color:#752eca;
text-decoration:none;
}
h2 {
font-size:14px;
color:#909090;
text-decoration:none!important;
}
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;
}
ul#nav {
padding:5px;
margin:0px auto;
width:100%;
}
ul#nav li a {
display:block;
font-weight:bold;
padding:2px 10px;
background:#bacddb;
}
ul#nav li a:hover {
background:#888;
color:#fff;
}
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-top:none;
}
li:hover ul, li.over ul {
display:block;
}
ul#nav li.current a {
background:#b8ab28;
}
ul#nav li.current a:hover {
background:#888;
}
img {
margin:10px 0 5px;
}
*html img {
margin:20px;
}
.coltextimg {
position:relative;
float:left;
background-position:left bottom;
padding:0px 20px 10px 0px;
border:none;
}
#maincontent {
width:940px;
margin:0px auto;
postition:absolute;
}
*html #maincontent {
margin-left:42px;
}
#header {
float:left;
width:100%;
height:auto!important;
height:100%;
min-height:100%;
margin:0px auto;
background-image:url(images/banner_test.jpg);
background-repeat:no-repeat;
border:2px solid #752eca;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.colmask {
position:relative;
margin-top:160px;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.colright,
.colmid {
float:left;
width:100%;
position:relative;
}
.col1,
.col2 {
float:left;
position:relative;
padding:10px 0 1em 0;
overflow:hidden;
}
.twocol {
background:#fff;
}
.twocol .colmid {
right:45%;
background:#fff;
}
.twocol .col1 {
width:51%;
left:47%;
text-align:justify;
z-index:0;
}
.twocol .col2 {
width:41%;
left:51%;
text-align:justify;
z-index:0;
}
.twocol .colimg {
border:2px solid #a0a0a0;
}
.twocol .colvid1 {
width:360px;
height:240px;
}
.twocol .colvid2 {
width:360px;
height:240px;
}
#footer {
text-align:center;
font-size:9px;
padding:10px 0 1em 0;
clear:both;
width:100%;
height:100%;
}
*html #footer {
height:43px;
}
#footer p a {
text-decoration:none;
}
#lyr_ddmenu {
position:absolute;
z-index:1;
height:10px;
top:120px;
float:left;
width:1000px;
margin:0px auto;
padding:5px;
}
#contact {
position:absolute;
float:right;
font-size:10px;
}
A.Controls:link {
color:#666666;
text-decoration:none;
font-weight:bold;
}
A.Controls:visited {
color:#666666;
text-decoration:none;
font-weight:bold;
}
A.Controls:active {
color:#666666;
text-decoration:none;
font-weight:bold;
}
A.Controls:hover {
color:#be0000;
text-decoration:none;
font-weight:bold;
}
And here's the html I'm having the specific problem with:
<div id="maincontent">
<div id="header">
<div id="lyr_ddmenu">
<ul id="nav">
<li class="current"><href here...</a>
<ul class="sub">
<li><href here...</a></li>
<li><href here...</a></li>
<li><href here...</a></li>
<li><href here...</a></li>
<li><href here...</a></li>
</ul></li>
<li><href here...</a></li>
<ul class="sub">
<li><href here...</a></li>
<li><href here...</a></li>
<li><href here...</a></li>
<li><href here...</a></li>
</ul></li>
<li><href here...</a></li>
<li><href here...</a></li>
<ul class="sub">
<li><href here...</a></li>
</ul></li>
</ul>
</div>
Thanks!
