Page 1 of 1

[not Solved for IE7] Four-level CSSMenu?

Posted: Sun Aug 05, 2007 5:46 pm
by mbaksa
It all works when there are only three levels, but in places where I have four levels, fourth level is shown when it shouldn't be.

In stylesheet are two "paragraphs" like this
/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
I added that with no success. Is there a solution for this? Site is http://www.hyla.hr/cmsmadesimple/ (sorry, no English yet, just Croatian), menu is Projekti > Upoznajmo vodozemce - prvi na udaru > etc... When mouse cursor is over "Upoznajmo vodozemce - prvi na udaru", the fourth level is also shown. Sorry to bother you again. Thanx

Re: Four-level CSSMenu?

Posted: Sun Aug 05, 2007 8:57 pm
by Nullig
The two additions need to be:

#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,

and

#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,


Nullig

Re: Four-level CSSMenu?

Posted: Mon Aug 06, 2007 8:19 am
by mbaksa
Nullig wrote: The two additions need to be:

#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,

and

#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,


Nullig
Thank you, that solved the problem - the first line I added was "#primary-nav li:hover ul ul ul, ", and it was missing one "ul".

I still have a couple of problems in IE6 (in FF it's OK): on first level menu items hover if mouse is over, but you can't click on them unless you click exactly on menu-text).

Also in Firefox also there are no arrows for menu parents.  ???

This is my full stylesheet for menu (I believe I haven't changed much - colors and stuff...): http://www.hyla.hr/cmsmadesimple/menu-css.txt

Re: Four-level CSSMenu?

Posted: Mon Aug 06, 2007 1:08 pm
by mbaksa
OK, arrow problem in Firefox is solved, thanx to mark (see http://forum.cmsmadesimple.org/index.ph ... l#msg37618) - I'm surprized that it wasn't corrected in the templates of CMSMS installation.  ???

BTW I'm not that much familiar with CSS - what's the difference between
#primary-nav ul li.menuparent and #primary-nav ul li .menuparent (notice the space between li and .menuparent in second example) and which is correct? In IE6 works both, but in FF only second one is OK.

Still, in IE stays is that problem with IE6 and hover effect in the first (horizontal) level.

Re: Four-level CSSMenu?

Posted: Mon Aug 06, 2007 3:56 pm
by KO
This IE first level navi problem might be bug in IE6 at least. Try adding following

#primary-nav a {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  text-decoration: none;
  color: #cdcdcd;
  font-family: arial, garamond;
  font-size: 90%;
position:relative; <-- add this
}

If it helps - check that it's ok on all browsers.

Br,
K

Re: Four-level CSSMenu?

Posted: Mon Aug 06, 2007 4:44 pm
by mbaksa
KO wrote: This IE first level navi problem might be bug in IE6 at least. Try adding following

#primary-nav a {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  text-decoration: none;
  color: #cdcdcd;
  font-family: arial, garamond;
  font-size: 90%;
position:relative; <-- add this
}

If it helps - check that it's ok on all browsers.

Br,
K
Thank you, it helps, but raises another problem - now in FF. If you opened my web-page, you might have noticed that second-level menu is one pixel too high (I don't know if I'm responsible for that or not). So the 2nd level is actually displayed over a bottom part of level 1. When I use your fix, level 1 is "in front of" (if you understand what I mean) level 2 so it hides 1 top line of level 2. In IE is OK. Can you give me some advice? How can I place level2 menu (of course, and all other lowel level consequently) one pixel down? I tried to do some margin-top/bottom stuff, but stuff I changed affected every single menu element.

Re: Four-level CSSMenu?

Posted: Mon Aug 06, 2007 11:14 pm
by mbaksa
Problem solved. I put 1px top margin in #primary-nav ul, put bottom-border on the first level menu items and removed bottom-border from #menuwrapper.

Still need to verify that it works properly in IE7 though.

Re: [Solved] Four-level CSSMenu?

Posted: Tue Aug 07, 2007 6:21 am
by KO
I tried to check with another machine with IE7 but forgot wireless card i borrowed from it. if I remember to bring it tomorrow I can check unless someone else could check it before that.

br,

K

Re: [Solved] Four-level CSSMenu?

Posted: Tue Aug 07, 2007 1:03 pm
by mbaksa
KO wrote: I tried to check with another machine with IE7 but forgot wireless card i borrowed from it. if I remember to bring it tomorrow I can check unless someone else could check it before that.

br,

K
I opened the page in IE7 (under Vista) - it works almost OK - the problem is that sometimes when you movu mouse cursor over menu and hover level1 item "Projekti", the level2 menu drops down (as supposed) but level3 menu also drops down (text on level 3 menu is invisible). When I hover level2 menu, text on level3 menu becomes visible... I temporarily disabled your fix but it's the same. So, you've helped me to solve problem with IE6 (thank you for that again) but I still have to fix it for IE7...

Re: [not Solved for IE7] Four-level CSSMenu?

Posted: Tue Aug 07, 2007 3:00 pm
by Dr.CSS
Try this...

#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;
}

Re: [not Solved for IE7] Four-level CSSMenu?

Posted: Wed Aug 08, 2007 7:49 am
by KO
I was able to check with IE7 and it looks fine (same than Firefox) so if you did Marks fix I think that's it and you are done.

br, K

Re: [not Solved for IE7] Four-level CSSMenu?

Posted: Wed Aug 08, 2007 4:29 pm
by mbaksa
KO wrote: I was able to check with IE7 and it looks fine (same than Firefox) so if you did Marks fix I think that's it and you are done.

br, K
Tried marks fix but it didn't help - maybe I didn't implemented it right.

To be able to see what I'm talking about you have to move mouse cursor over the page and over the menu (from under "Projekti" to the top of the page) - it occurs sometimes, but not always. Or maybe it doesn't occur on Windows XP (i tried it on Vista)?

Anyway, thanx everyone for help, currently i don't have the time to deal with that because I'm going to a working camp with biologicians (those guys and girls that I'm maintaining website) for two weeks, so I won't be able to use a computer. We're going to the other part of country to clean two ponds so that they don't dry out and that turtles and frogs can live in them. :)

And there also is a problem with the website - our academic web-host decided to change our directory from hyla to hhd-hyla (because that's current name of this herpetologycal society) without notice and they only created directory hhd-hyla, while the website is stil in directory hyla. And they changed domain name www.hyla.hr to point to new (empy!) directory...  ::) They'll probobly correct this till the end of the week, but that's too late for me...