Menu
Hi. I am having problems with my horizontal navaigation bar w/drop downs. It works fine in FF but in IE the “primary-nav2” rollovers don’t work. ANy help would be appreciated.
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript”>
function IEHoverPseudo() {
var navItems = document.getElementById(“primary-nav”).getElementsByTagName(“li”);
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == “menuparent”) {
navItems[i].onmouseover=function() { this.className += ” over”; }
navItems[i].onmouseout=function() { this.className = “menuparent”; }
}
}
}
window.onload = IEHoverPseudo;
</script>
<style type=”text/css”>
body {}
ul#primary-nav,
ul#primary-nav ul {
width: 100%;
margin: 0;
padding: 0;
background: #EE2E24; /* IE6 Bug */
font: normal 80% verdana;font-weight: bold;
}
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 80% verdana;font-weight: bold;
}
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; }
</style>
</head>
<body>
<ul id=”primary-nav”>
<li class=”menuparent”><a href=”http://www.mentoring.org/mentors/index.php”> MENTORS</a>
<ul>
<li class=”text”><a href=”http://www.mentoring.org/mentors/index.php”>I would like to become a mentor.</a></li>
</ul>
</li>
<li class=”menuparent”><a href=”http://www.mentoring.org/leaders/index.php”> LEADERS</a>
<ul>
<li class=”text”><a href=”http://www.mentoring.org/leaders/index.php”>I would like to get my organization involved in mentoring.</a></li>
</ul>
</li>
<li class=”menuparent”><a href=”#”>CARING ADULTS</a>
<ul>
<li class=”text”><a href=”#”>I am interested in finding a mentor for a child.</a></li>
</ul>
</li>
<li class=”menuparent”><a href=”#”>PROGRAM STAFF</a>
<ul>
<li class=”text”><a href=”#”>I am interested in starting a mentoring program.</a></li>
</ul>
</li>
</ul>
<ul id=”primary-nav2″>
<li class=”menuparent”><a href=”#”>TAKE ACTION</a>
<ul>
<li class=”text”><a href=”#”>I would like to become a mentor</a></li>
</ul>
</li>
<li class=”menuparent”><a href=”#”>RESEARCH </a>
<ul>
<li class=”text”><a href=”#”>I would like to get my organizaation involved in mentoring</a></li>
</ul>
</li>
</ul>
</ul
>
</body>
</html>