Page 1 of 1

CSS drop down Menu works in Firefox but not IE

Posted: Wed Jan 11, 2006 8:26 pm
by papashu
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
     
 
 



Re: CSS drop down Menu works in Firefox but not IE

Posted: Thu Jan 12, 2006 12:29 am
by iNSiPiD
This appears to be a javascript related problem and nothing to do with CMSMS, or have I missed something?

If it's javascript support you're looking for then this probably isn't the best place to post.

That being said, you have a space before your delcaration of the over class in your javascript.

i.e. " over";

Re: CSS drop down Menu works in Firefox but not IE

Posted: Thu Apr 06, 2006 7:00 pm
by sawz
i am having the same issue, css horizontal1 menu wont show drop down portion using latest internet explorer. and i havent changes naything.

Re: CSS drop down Menu works in Firefox but not IE

Posted: Thu Apr 06, 2006 11:05 pm
by Dr.CSS
try this,,





just before this
in the template,,

  HTH
        mark