CSS-Menu Hover Issues with IE

[Lennynero]

Hi there,

for the Site:

http://195.135.147.2/exzept/Teilprojekte_Akzeptanz.html

I am using two kinds of Menus.

However: while Firefox is behaving like I expect it to do, the CSSMenu with the IE is corrupted.

Details: I have a horizental menu for the second level (first level being language), an a customized CSS Menu which will display level 3 and beyond... if there are pages/links beyond.

However: when I am on a 4th or 5th level site, the menupoints should be displayed (all childs of the father of that page), the other levels should only be visible with a css-mouse-over (or with the IE JS).

This works fine for firefox (4th or 5th level withiin one column), but not for IE, while the "standing menu" and the 4th level ist displayed right, the 5th level will be displayed on the right side of the 4th level.

Feel free to ask back if my desription seems somehwat weird.... but I think a look at the site will explain a lot.

I'd appreciate any help!

[Dr.CSS]

Try this,, i can't try it for you, i made that from mine and yours using Firefox with the Web Developers extention, i can edit the CSS on the fly with real time changes and it looked good to me, but i can't use it to see IE, tho when i did look at your menu in IE it was jumping all over the place, any ways give it a shot let me know how it works,,, 

/* The wrapper determines the width of the menu elements */

#menuwrapper
{
width: 163px;
}


/* Unless you know what you do, do not touch this */
/* Unless you know what you do, do not touch this */

#primary-nav {
list-style: none; 
padding: 0px;
width:150px;
        margin:3px 0px;color:#000;
}
#primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
        margin-right: 0px;
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
    margin-bottom: 3px;
position: relative;
}
#primary-nav li li{width:160px;
        margin-bottom: 0px;
        argin-right: 10px;
position: relative;
}
#primary-nav ul li li{
        margin-left: 0px;
        }

/* Styling the basic apperance of the menu elements */

#primary-nav a {
color #000;
display: block;
margin: 0px; 
text-decoration: none;
}
#primary-nav li, #primary-nav li .menuparent {

}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
color:#000
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */


#primary-nav ul li. menuparent, #primary-nav ul li .menuparent:hover,#primary-nav li .menuparent, #primary-nav li .menuparent:hover {
background-image: url(modules/CSSMenu/images/arrow.gif);
background-position: center left;
background-repeat: no-repeat;
}

/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul, #primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul, #primary-nav ul ul ul li.menuparenth ul {
display: block;
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


div#menu_vert
{
  float: left;
  width: 163px;
  display: inline;
  margin-left: 0;
}



/* Styling the basic apperance of the menu elements */

#primary-nav a
{
display: block;
color: #666666;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive, #primary-nav a.menuactive
{
color: #980F08;
display: block;
}

#primary-nav li li li,  #primary-nav li li li a
{
font-size: 8pt;
}

#primary-nav li li li a
{
padding-left: 21px;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh
{
background-color: #E7AB0B;

}

#rimary-nav li ul, li ul ul, li li, li li li  just add the p if you need to
{
  background-color: #fff;
  width: 175px;

}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */


#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul
{
display: block;
background-color: #fff;
}

#primary-nav li:hover.menuactive ul, #primary-nav li:hover ul, #primary-nav li:hover ul li a
{
  border: none;
  background-color: #e7e8ea;
}

#primary-nav li:hover.menuactive ul ul, #primary-nav li:hover ul ul
{
border: none;
  background-color: #e7e8ea;
}

#primary-nav li:hover ul, li:hover ul ul, li:hover li, li:hover li li
{
  background-color: #e7e8ea;
}

/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth
{
  _float: left;
  _height: 1%;
}

#primary-nav li a
{
  _height: 1%;
}

div#menu_vert
{
  float: left;
  width: 163px;
  display: inline;
  margin-left: 0;
}


    mark

[Lennynero]

Try this,, i can't try it for you, i made that from mine and yours using Firefox with the Web Developers extention, i can edit the CSS on the fly with real time changes and it looked good to me, but i can't use it to see IE, tho when i did look at your menu in IE it was jumping all over the place, any ways give it a shot let me know how it works,,, 

Hi mark, thanks for your (quick) help, but it turns out to look wrong in Firefox too.

Actually I'd like to have the same look on IE as I have on Firefox, and the thing that really disturbs me is that jumping around (where the items of the 5th level where displayed under the 4th when the mouse is not on the parent-item, and than jumps to the side when the mouse is over the parent.

Colors is an issue too, but that is not so dramatic (the hovering menu should have the blue-grey background, the active item the yellow).

Thanks again,
Markus

[Dr.CSS]

this is what it looked like in Firefox to me,, img below,,

    mark

[attachment deleted by admin]

[Dr.CSS]

when i edited your CSS in Firefox it looked like this,, three shots, first two 1.png,2.png are with my style last is yours,,,

  mark

[attachment deleted by admin]

[Lennynero]

this is what it looked like in Firefox to me,, img below,,

That is what it looked like with Firefox when I used your proposal too, but my plan is to have it exactly the way Firefox is showing it now: having the Blue hovering above the other. IE is doing that too. but only for the 4th level, the 5th level should be shown udner (or between) the entries of the 4th level.

Code: Select all

Level3a
Level3b Level4a
Level3c level4b
        level4c
          level5c
          level5b
        level4d
        level4e

That is perfec t (even having the children of one Level3 parent displayed above the other), only whilst doing the hover-thing IE makes the follwing:

Code: Select all

Level3a
Level3b Level4a
Level3c level4b
        level4c level5a
        level4d level5b
        level4e

[Dr.CSS]

so you want it to look like it does right now in firefox with one of the left menu items open then have another lay over it?

  mark

[Lennynero]

so you want it to look like it does right now in firefox with one of the left menu items open then have another lay over it?

Exactly.

[Lennynero]

Any other ideas?