I have a css menu that works great in IE7 and other browser but when you check it in IE 6 it only shows the first dropdown. I am not that great at css but ANY help would be greatly appreciated.
here is the site I am having trouble with.
here is the navigation css:
.moveover {
text-align: left;
margin-left: 8px;
font-size: 11px;
color: #000000;
display: block;
overflow: visible;
}
.moveover2 {
text-indent: 1px;
padding-left: 1px;
font-size: 11px;
color: #000000;
display: block;
}
.moveNav {
margin-left: 180px;
padding-left: 180px;
}
#pageTag {
width: 600px;
height: 27px;
margin: 155px 0px 0px 20px;
position: absolute;
z-index: 26;
}
#navholder {
width: 483px;
height: 27px;
margin: 10px 0px 0px 0px;
position: absolute;
z-index: 45;
clear: both;
}
a {
text-decoration: none;
color: #000000;
}
#nocss {
display: none;
}
#OldSchool {
z-index: 1;
}
.label {
display: none;
}
/* START - Nav 1 */
/* Float nav and set basic properties - in this case the id and block element are the same and so are combined */
#nav, #nav ul {
float: left;
width: 160px;
display: block;
height: 27px;
list-style: none;
line-height: .85;
font-weight: bold;
padding: 0;
margin: 0;
color: #FFFFFF;
font:Arial, Helvetica, sans-serif;
font-size: 11px;
}
/* Control style and placement of links as well as dropdown block */
#nav a {
display: block;
width: 160px;
w\idth: 160px;
height: 26px;
font-size: 11px;
font-weight: normal;
text-decoration: none;
padding: 0;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-style: normal;
font-weight: normal;
}
#nav a:hover {
}
/* Set properties of top element */
#nav li {
float: left;
padding: 0;
width: 140px;
height: 26px;
background-color: #f78221;
}
/* Position the menu off screen rather than display: none; */
#nav li ul {
position: absolute;
left: -999em;
/*height: auto;*/
width: 170px;
w\idth: 170px;
font-weight: normal;
margin: 0;
}
/* Set properties of dropdown cells - width will affect non mouse-over in IE */
#nav li li {
background: #808080;
margin: 0;
padding: 0;
height: 27px;
line-height: 30px;
width: 160px;
text-indent: 9px;
padding-top: 3px;
}
#nav li ul a {
height: 20px;
width: 140px;
w\idth: 140px;
padding: 0;
display: block;
}
#nav li ul a:hover {
height: 20px;
width: 140px;
w\idth: 140px;
padding: 0;
color: #000000;
display: block;
}
/* third-and-above-level lists */
#nav li ul ul {
margin: -19px 0 0 131px;
}
/* Move menu back on page on mouse over */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
/* Control Background of Top Mouse Over */
#nav li:hover, #nav li.sfhover {
background-color: #f78221;
}
/* Control Background of Drop Down Mouse Over */
#nav li li:hover, #nav li li.sfhover {
background: #f78221;
}
#nav li:hover, #nav li.hover {
position: static;
}
/* END - Nav 1 */
here is the site I am having trouble with.
here is the navigation css:
.moveover {
text-align: left;
margin-left: 8px;
font-size: 11px;
color: #000000;
display: block;
overflow: visible;
}
.moveover2 {
text-indent: 1px;
padding-left: 1px;
font-size: 11px;
color: #000000;
display: block;
}
.moveNav {
margin-left: 180px;
padding-left: 180px;
}
#pageTag {
width: 600px;
height: 27px;
margin: 155px 0px 0px 20px;
position: absolute;
z-index: 26;
}
#navholder {
width: 483px;
height: 27px;
margin: 10px 0px 0px 0px;
position: absolute;
z-index: 45;
clear: both;
}
a {
text-decoration: none;
color: #000000;
}
#nocss {
display: none;
}
#OldSchool {
z-index: 1;
}
.label {
display: none;
}
/* START - Nav 1 */
/* Float nav and set basic properties - in this case the id and block element are the same and so are combined */
#nav, #nav ul {
float: left;
width: 160px;
display: block;
height: 27px;
list-style: none;
line-height: .85;
font-weight: bold;
padding: 0;
margin: 0;
color: #FFFFFF;
font:Arial, Helvetica, sans-serif;
font-size: 11px;
}
/* Control style and placement of links as well as dropdown block */
#nav a {
display: block;
width: 160px;
w\idth: 160px;
height: 26px;
font-size: 11px;
font-weight: normal;
text-decoration: none;
padding: 0;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-style: normal;
font-weight: normal;
}
#nav a:hover {
}
/* Set properties of top element */
#nav li {
float: left;
padding: 0;
width: 140px;
height: 26px;
background-color: #f78221;
}
/* Position the menu off screen rather than display: none; */
#nav li ul {
position: absolute;
left: -999em;
/*height: auto;*/
width: 170px;
w\idth: 170px;
font-weight: normal;
margin: 0;
}
/* Set properties of dropdown cells - width will affect non mouse-over in IE */
#nav li li {
background: #808080;
margin: 0;
padding: 0;
height: 27px;
line-height: 30px;
width: 160px;
text-indent: 9px;
padding-top: 3px;
}
#nav li ul a {
height: 20px;
width: 140px;
w\idth: 140px;
padding: 0;
display: block;
}
#nav li ul a:hover {
height: 20px;
width: 140px;
w\idth: 140px;
padding: 0;
color: #000000;
display: block;
}
/* third-and-above-level lists */
#nav li ul ul {
margin: -19px 0 0 131px;
}
/* Move menu back on page on mouse over */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
/* Control Background of Top Mouse Over */
#nav li:hover, #nav li.sfhover {
background-color: #f78221;
}
/* Control Background of Drop Down Mouse Over */
#nav li li:hover, #nav li li.sfhover {
background: #f78221;
}
#nav li:hover, #nav li.hover {
position: static;
}
/* END - Nav 1 */
Comment