CSS drop down Menu works in Firefox but not IE
Posted: Wed Jan 11, 2006 8:26 pm
I am having trouble with my navigation bar. It works in Firefox but not IE . Any ideas? I am not good at Javascript and I think thats where my problem is. Any ideas?
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i
body {}
ul#primary-nav,
ul#primary-nav ul {
width: 100%;
margin: 0;
padding: 0;
background: #EE2E24; /* IE6 Bug */
font: normal 10% verdana;font-weight: bold;
font-size: 10%;
}
ul#primary-nav {
float: left;
width: 69%;
position: absolute;
top: 75px;
height: 25px;
background: #EE2E24;}
ul#primary-nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul#primary-nav li {
position: relative;
list-style: none;
float: left;
width: 24.75%; /* Width of Menu Items */
postion:left:10px;
}
ul#primary-nav li.text {
position: relative;
list-style: none;
float: left;
width: 100%; /* Width of Menu Items */
}
ul#primary-nav li.text a:hover { color: #ffffff; }
ul#primary-nav li a,
ul#primary-nav li li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
}
ul#primary-nav ul ul {
left: 140px;
top: 0;
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
ul#primary-nav li li.menuparent { background: transparent url(arrow-right.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #ffffff!important; }
ul#primary-nav li a:hover { color: #5E5F60; }
ul#primary-nav2,
ul#primary-nav2 ul {
width: 100%;
margin: 0;
padding: 0;
background: #FDB812; /* IE6 Bug */
font: normal 10% verdana;font-weight: bold;
font-size: 10%;
}
ul#primary-nav2 {
float: left;
width: 31%;
position:absolute;
top: 75px;
right:0px;
background: #FDB812;
height: 25px;}
ul#primary-nav2:after {
content:
height: 3".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul#primary-nav2 li {
position: relative;
list-style: none;
float: left;
width: 49%; /* Width of Menu Items */
text-align:center;
}
ul#primary-nav2 li.text {
position: relative;
list-style: none;
float: left;
width: 100%; /* Width of Menu Items */
}
ul#primary-nav2 li a,
ul#primary-nav2 li li a {
display: block;
text-decoration: none;
color: #5E5F60;
padding: 5px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav2 li { float: left; height: 1%; }
* html ul#primary-nav2 li a { height: 1%; }
/* End */
ul#primary-nav2 ul {
position: absolute;
display: none;
}
ul#primary-nav2 ul ul {
left: 140px;
top: 0;
}
ul#primary-nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav2 li:hover ul ul,
ul#primary-nav2 li:hover ul ul ul,
ul#primary-nav2 li.over ul ul,
ul#primary-nav2 li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav2 li:hover ul,
ul#primary-nav2 li li:hover ul,
ul#primary-nav2 li li li:hover ul,
ul#primary-nav2 li.over ul,
ul#primary-nav2 li li.over ul,
ul#primary-nav2 li li li.over ul { display: block; } /* The magic */
ul#primary-nav2 li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
ul#primary-nav2 li li.menuparent { background: transparent url(arrow-right.gif) right center no-repeat; }
ul#primary-nav2 li.menuparent:hover,
ul#primary-nav2 li.over { background-color: #ffffff !important; }
ul#primary-nav2 li a:hover { color: #5E5F60; }
MENTORS
I would like to become a mentor.
LEADERS
I would like to get my organization involved in mentoring.
CARING ADULTS
I am interested in finding a mentor for a child.
PROGRAM STAFF
I am interested in starting a mentoring program.
TAKE ACTION
I would like to become a mentor
RESEARCH
I would like to get my organizaation involved in mentoring
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i
body {}
ul#primary-nav,
ul#primary-nav ul {
width: 100%;
margin: 0;
padding: 0;
background: #EE2E24; /* IE6 Bug */
font: normal 10% verdana;font-weight: bold;
font-size: 10%;
}
ul#primary-nav {
float: left;
width: 69%;
position: absolute;
top: 75px;
height: 25px;
background: #EE2E24;}
ul#primary-nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul#primary-nav li {
position: relative;
list-style: none;
float: left;
width: 24.75%; /* Width of Menu Items */
postion:left:10px;
}
ul#primary-nav li.text {
position: relative;
list-style: none;
float: left;
width: 100%; /* Width of Menu Items */
}
ul#primary-nav li.text a:hover { color: #ffffff; }
ul#primary-nav li a,
ul#primary-nav li li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
}
ul#primary-nav ul ul {
left: 140px;
top: 0;
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
ul#primary-nav li li.menuparent { background: transparent url(arrow-right.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #ffffff!important; }
ul#primary-nav li a:hover { color: #5E5F60; }
ul#primary-nav2,
ul#primary-nav2 ul {
width: 100%;
margin: 0;
padding: 0;
background: #FDB812; /* IE6 Bug */
font: normal 10% verdana;font-weight: bold;
font-size: 10%;
}
ul#primary-nav2 {
float: left;
width: 31%;
position:absolute;
top: 75px;
right:0px;
background: #FDB812;
height: 25px;}
ul#primary-nav2:after {
content:
height: 3".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul#primary-nav2 li {
position: relative;
list-style: none;
float: left;
width: 49%; /* Width of Menu Items */
text-align:center;
}
ul#primary-nav2 li.text {
position: relative;
list-style: none;
float: left;
width: 100%; /* Width of Menu Items */
}
ul#primary-nav2 li a,
ul#primary-nav2 li li a {
display: block;
text-decoration: none;
color: #5E5F60;
padding: 5px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav2 li { float: left; height: 1%; }
* html ul#primary-nav2 li a { height: 1%; }
/* End */
ul#primary-nav2 ul {
position: absolute;
display: none;
}
ul#primary-nav2 ul ul {
left: 140px;
top: 0;
}
ul#primary-nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav2 li:hover ul ul,
ul#primary-nav2 li:hover ul ul ul,
ul#primary-nav2 li.over ul ul,
ul#primary-nav2 li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav2 li:hover ul,
ul#primary-nav2 li li:hover ul,
ul#primary-nav2 li li li:hover ul,
ul#primary-nav2 li.over ul,
ul#primary-nav2 li li.over ul,
ul#primary-nav2 li li li.over ul { display: block; } /* The magic */
ul#primary-nav2 li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
ul#primary-nav2 li li.menuparent { background: transparent url(arrow-right.gif) right center no-repeat; }
ul#primary-nav2 li.menuparent:hover,
ul#primary-nav2 li.over { background-color: #ffffff !important; }
ul#primary-nav2 li a:hover { color: #5E5F60; }
MENTORS
I would like to become a mentor.
LEADERS
I would like to get my organization involved in mentoring.
CARING ADULTS
I am interested in finding a mentor for a child.
PROGRAM STAFF
I am interested in starting a mentoring program.
TAKE ACTION
I would like to become a mentor
RESEARCH
I would like to get my organizaation involved in mentoring