CSS drop down Menu works in Firefox but not IE

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Locked
papashu

CSS drop down Menu works in Firefox but not IE

Post 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
     
 
 


iNSiPiD

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

Post 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";
sawz

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

Post 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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post by Dr.CSS »

try this,,





just before this
in the template,,

  HTH
        mark
Locked

Return to “CMSMS Core”