190 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

After reading an excellent article at A List Apart I was inspired to create a similar menu that allowed multiple menu levels and a vertical version.

The really small JavaScript file is only needed for IE the rest of the browsers only require CSS.

My version is not as pretty as the Suckerfish Dropdowns final example, but still pretty cool.

Let me know if it works or not on your browsers, I'm really interested to here from Mac users.

Light Weight Multi Level Drop Down Menu

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 49 weeks 18 hours ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Light Weight Multi Level Drop Down Menu

Tony, that looks pretty cool.... the "suckerfish" example page link is a Page Not Found(404) Error

BTW have you played around with any XML based menu systems ?

http//melbourne.ug.php.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi paCkeTroUTer,
Thanks I fixed up the link.
Can you point out a couple of good XML based menu systems.

kenrbnsn
Offline
newbie
Hillsborough, NJ USA
Last seen: 10 years 27 weeks ago
Hillsborough, NJ USA
Timezone: GMT-5
Joined: 2003-10-11
Posts: 6
Points: 0

Light Weight Multi Level Drop Down Menu

I have come across a problem using your method on IE6. I have a horizontal navigation list that wraps to form two rows of buttons. A dropdown list from the upper row of buttons is hidden under the second row.

It works fine in Moz1.4

I have tried various 'z-index' values to no avail. Sad

Is there a solution to this problem?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi kenrbnsn,
Thanks for pointing it out.
I haven't thought of a solution yet but will be working on it.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Well after hours of trying many different combinations of CSS rules I have finally cracked it. Cool
When the horizontal menu wraps both levels of menu are available.

I'd still like to here from some Mac users if there are any about.
http://www.csscreator.com/menu/multimenu.php

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 6 years 45 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Light Weight Multi Level Drop Down Menu

That's a really nice menu! On the platforms where it doesn't work, what does happen? It would be great if the navigation fell out anyway, just as the logical nested lists...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Yes that about what happens although I'm still waiting on someone with a mac to test it out in some browser Smile

The JavaScript is only needed for IE so if any other browser has JavaScript disabled the menu will still work.

If the browser doesn't support CSS at all then it will just see the unordered lists.

If IE has JavaScript disabled it will be stuck with just the top level menu. You could get round this by using JavaScript to write out the css for IE so a plain list would be displayed without css when IE had Javascript disabled.
That's not really a concern for me If you are surfing without JavaScript then you are missing so much anyway a few levels of menu wont be missed
:roll:

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 6 years 45 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Light Weight Multi Level Drop Down Menu

I might (fingers crossed) be able to track down a mac user and give it a try. Not sure what browser he uses, though.

teaboy
Offline
newbie
Last seen: 10 years 21 weeks ago
Joined: 2003-11-21
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

Hiya, Mac user here, running OS X.2.8. Sorry to bring bad news, especially as it's my first post here

Safari 1.0 (v85.5)
Horizontal menu. Only the first item in the dropdown is displayed
Vertical menu. Seems to work fine
However, the sidebar on the right starts underneath the main section, but at the correct horizontal position.

MozillaFB (0.7.1 milestone)
Horizontal renders correctly, same problem with the sidebar as above. However, when you mouseover any of the items in the vertical menu, the flow of the page is interrupted. The section entitled 'Files' is shifted up to start in the margin next to 'Javascript'

MacIE (5.2)
Totally breaks the layout of the page, and the menus don't drop down at all.

Camino (0.7 milestone)
Works, although there are problems with the vertical menu as detailed with MozFB (and other gecko browsers, i presume?).

If you want some screenshots, send me a PM and i'll send some over to you

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi teaboy,
Thanks for the response.
The Vertical menu was fun to create but it's not very usable in anything so I am looking into a redesign for it.

Looks like I have some work on the horizontal one as well.

Thanks again for pointing out the problems.

brad98
Offline
newbie
Last seen: 10 years 21 weeks ago
Joined: 2003-11-23
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

any way to make this menu hug the top left corner of the browser window? if you take the #nav id property off the ul it does but of course then it starts screwing with other ul's on the page.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi brad98,
The easiest way would be to position a containing div around the menu.
Something like position: absolute; top:0; left:0; margin-left:-2em;

Hope that helps

kenrbnsn
Offline
newbie
Hillsborough, NJ USA
Last seen: 10 years 27 weeks ago
Hillsborough, NJ USA
Timezone: GMT-5
Joined: 2003-10-11
Posts: 6
Points: 0

This is driving me crazy!

I'm playing with the vertical menu portion of your code..

My version works fine in IE6. In Mozilla, all of the hidden ULs for a particular LI display on hover. In Opera, nothing works. ](*,)

You can see the pages at http://63.247.85.58/~restaura/admin/isok.php?action=update&what=doit

This has been driving me crazy all weekend!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi kenrbnsn,
I don't have Opera installed at work so I'll check it out when I get home.
What versions of Opera is causing problems?

kenrbnsn
Offline
newbie
Hillsborough, NJ USA
Last seen: 10 years 27 weeks ago
Hillsborough, NJ USA
Timezone: GMT-5
Joined: 2003-10-11
Posts: 6
Points: 0

Light Weight Multi Level Drop Down Menu

Tony wrote:
What versions of Opera is causing problems?

Sorry.

Versions: Mozilla 1.4 and Opera 7.23 (just downloaded today)

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi kenrbnsn,
I think the Opera is caused by lack of available LI space for hover.
Try putting some margin on a elements within vertnav.

 
#vertnav a { 
    margin:0.2em 0 0.2em 0.1em;
the order clockwise from the top, top - right - bottom - left. Right margin is left at 0 so to make it easier to hover onto the menu that pops to the right.

Hope that helps

kenrbnsn
Offline
newbie
Hillsborough, NJ USA
Last seen: 10 years 27 weeks ago
Hillsborough, NJ USA
Timezone: GMT-5
Joined: 2003-10-11
Posts: 6
Points: 0

Re-coded the CSS

I decided to go back and re-code the CSS.

I deleted everything dealing with the nav lists and added things back one by one seeing how each affected the display.

I now have everything working on IE6 and Mozilla 1.4 Smile

It still doesn't work on Opera 7.23 but I'm not too worried since the person who will be using this page doesn't use Opera.

Brendan
Offline
newbie
Last seen: 10 years 28 weeks ago
Joined: 2003-10-08
Posts: 4
Points: 0

Light Weight Multi Level Drop Down Menu

When I use this in IE6 and mouseover the top-level menu, it seems to shift everything a bit to the right. I haven't been able to figure out how to fix this, any ideas?

Brendan
Offline
newbie
Last seen: 10 years 28 weeks ago
Joined: 2003-10-08
Posts: 4
Points: 0

Light Weight Multi Level Drop Down Menu

Oops, sorry to post again so soon. I'm also having trouble in that when I remove the set width of the #nav li rule the submenus suddenly go into what appears to be an inline display. I'd like to not have all of the li the same width, so was hoping to be able to set the width to auto, but that's not working. Any ideas how to fix this, or should I just manually set the width on each li?

Thanks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi Brendan,
To fix the movement in IE set the position to absolute in #nav ul, which is how I originally had it set. It was changed to relative for when the menu wrapped to another line the bottom level was not accessible.

I don't know of a solution for the width problem if you find anything let us know.

SuprSpy79
Offline
newbie
Last seen: 10 years 18 weeks ago
Joined: 2003-12-15
Posts: 3
Points: 0

Cant get Opera working

Hey guys, I used a combo of the Suckfish version and the version from this site. I cant get it to work in Opera because the rollovers appear in the upper left corner. Anyone figre that out yet?

You can check it out at www.flchost.com

Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi SuprSpy79,
Try adding position:relative; to #menu ul.

Hope that helps.

RockyShark
RockyShark's picture
Offline
newbie
Last seen: 10 years 16 weeks ago
Joined: 2003-12-29
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

I keep getting a javascript error in IE6 on WinXP. The dropdowns work, but it gives me an "Object required" error that seems to translate to this line:
if (document.all && document.getElementById(nav).currentStyle) {

I don't know why - it's a dead-set copy and paste... anyone else had this trouble???

Mza
Offline
newbie
Last seen: 10 years 15 weeks ago
Joined: 2004-01-08
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

Nice work.

Any idea of how to get form elements such as <select> not to show through the menu in IE?

public
Offline
newbie
Last seen: 10 years 15 weeks ago
Joined: 2004-01-08
Posts: 1
Points: 0

Light Weight Multi Level Drop Down Menu

Hi,

Great menu! I have used this in one of my websites and it works a treat.
I like the minimal use of javascript, too.

I have a question, though.

How do I get the vertical menu to appear to the far left of the screen? On all of my pages it seems to be shifted about 5% (not exact) out from the left and I cannot find what controls this setting.

cheers,
adrian

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi guy's,
Mza,
Select boxes and some other form elements don't are handled differently by browsers then most other elements. They don't follow the normal z-index layering structure. I don't know of a way around it apart from moving either the menu or select elements out of the way. Sad

Public,
Have you tried playing around with the left margin on the top level ul.

Hope that helps

kenrbnsn
Offline
newbie
Hillsborough, NJ USA
Last seen: 10 years 27 weeks ago
Hillsborough, NJ USA
Timezone: GMT-5
Joined: 2003-10-11
Posts: 6
Points: 0

Problems with older browsers on the MAC

I am completing a redesign of my major account's site.

Here is the old site: http://www.restaurantserenade.com/
Here is the new site: http://63.247.85.58/~restaura/new/index.php (click on the logo to get to the rest of the site)

I need feedback of the look and feel, how it looks and performs in older browsers, how it looks on platforms other than Windows (MAC, Linux).

The new site uses the techniques discussed in this thread for the left hand menus.

I know the site doesn't perform well on Netscape 4.7 and I had a person contact me who uses a mac G4 with Internet Explorer, 5.1 and said it looked horrible.

The content is still being worked on.

Thanks in advance.

horatiu
Offline
newbie
romania
Last seen: 10 years 8 weeks ago
romania
Joined: 2004-02-22
Posts: 1
Points: 0

a little multilevel menu problem

Hello,

I just read about the multilevel menu. It's an excellent menu, but I have a little problem with it. Some elements of a submenu hide under some elements of the parent menu. Have you got any idea how to solve this problem ? I tried for hours to set z-indexes but it didn't work.

Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi kenrbnsn,
possibly your friend doesn't like purple Smile
I don't have a mac to test with but I do mention on the page that it fails in IE5.2 on Mac, so I can only assume the menu also fails in IE5.1 on mac.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi horatiu,
Can you post a link to the page so we can have a look.
Also which browsers are causing the problems.

LeFonk
Offline
newbie
Last seen: 10 years 7 weeks ago
Joined: 2004-02-27
Posts: 3
Points: 0

different height of block in top and sub menus

Is it possible to have a different height of block than the topmenu in the submenus?
I couldn't figure out how to achieve this

Thx for your help

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi LeFonk,
I'm not sure I understand your question but I'll have a go anyway.
If you give the li a class then you should be able to change the height of a specific list item.

  .bigone{height:100px !important; background-color:red !important;}

<li class="bigone"><a ... 

Mark the style !important if they are having no effect.

Hope that helps

LeFonk
Offline
newbie
Last seen: 10 years 7 weeks ago
Joined: 2004-02-27
Posts: 3
Points: 0

unfortunately, it doesn't work

i'm afraid that in IE it doesn't work...
if you put a bigger size than the top menu, it seems to work (ie. height: 50px;)
but if you put a smaller size, which is what i'm trying to get, like height: 15px, it doesn't.
the #nav a { height:1em;} is the one that is kept....

if anyone has a solution....

thx

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi LeFonk,
Give that LI a class as I mentioned before and set the height and line-height of the "a" within that class

li.small{height:10px;} 
    li.small a{height:10px; line-height:10px;}

Hope that helps

LeFonk
Offline
newbie
Last seen: 10 years 7 weeks ago
Joined: 2004-02-27
Posts: 3
Points: 0

it's getting better....

it seems to work but there's still something i can't understand
could you please have a look here
http://home4funk.mp3.free.fr/dropdown/index.html

my test menu is there

the first submenus height is working with the new class i put, but there's a space between each item of the submenus i can't figure out where it comes from.

just see the source of the page, everything is there (no external css or js file)

Thx

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi LeFonk
After

#nav li a {
	background-image: url(img/fd_nav.gif);
	line-height: 30px;
	height: 30px;
}

add
#nav li  li a {
	line-height: 20px;
	height: 20px;
}
and adjust the values as needed.

Hope that helps

MattyUK
Offline
Regular
Last seen: 9 years 52 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Light Weight Multi Level Drop Down Menu

RockyShark wrote:

Quote:
I keep getting a javascript error in IE6 on WinXP. The dropdowns work, but it gives me an "Object required" error that seems to translate to this line:
if (document.all && document.getElementById(nav).currentStyle) {

I don't know why - it's a dead-set copy and paste... anyone else had this trouble???

I had same problem.

Comment out the last line. The bottom part of the script seems to pass the var if left without a comment it simple calls once with the "nav" id used and once again with the "vertnav" id used.

Look at this segment of code:
window.onload= function(){
/* pass the function the id of the top level UL */
activateMenu('nav');
activateMenu('vertnav');
}

If using nav menu change to:

Quote:
window.onload= function(){
/* pass the function the id of the top level UL */
activateMenu('nav');
/* activateMenu('vertnav'); */
}

If using vertnav menu change to:
Quote:
window.onload= function(){
/* pass the function the id of the top level UL */
/* activateMenu('nav'); */
activateMenu('vertnav');
}

Well I think I am right in the above, it does work for me.

MattyUK

Carrots encourage. Sticks enforce. Which is needed here?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi MattyUK,
Your correct, only one of those lines is needed depending on your choice of menu.
Since my example has two menus I left them both in.

I will have to revise the wording of the example to make it clearer.

anniii
Offline
newbie
Last seen: 9 years 51 weeks ago
Joined: 2004-04-29
Posts: 2
Points: 0

Light Weight Multi Level Drop Down Menu

Hi, I'm working on implementing the vertical menu.
I notice that even in the example given at http://www.csscreator.com/menu/multimenu.php
when you hover over the first level menu item, what appears to be a white line appears.
even if I match the background colour to the menu color (to try to hide the line) the menu items on the first level appear to "jump" when you hover over them. Hovering down the menu is slightly less obvious than if you hover up the menu for some reason.
the second level menu is fine though.
How can I get rid of this?

Thanks

Anniii
PS love the menu

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi annii,
Sorry for the slow response.
Adding float:left; to #vertnav li, stops the gap in IE6.
I have only tested it in Firefox and IE6.
When I get time I will test it a little more and add it to the demo page.

Hope that helps

memcinto
Offline
newbie
Last seen: 9 years 50 weeks ago
Joined: 2004-05-06
Posts: 3
Points: 0

Gap and jumps

(I've been waiting for the same reply as annii) -- I tried adding float:left; to #vertnav li and instead of fixing the problem, it caused my first-level menu items to flow across the page instead of lining up vertically on the left.

--memcinto

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi memcinto,
Which browsers are you having problems with?
Heres what I have in multimenuvert.css

#vertnav{list-style: none;} 
 
#vertnav ul {  
	padding:0; 
	margin:0; 
	list-style: none; 
    width:12em; 
   z-index:99; 
   overflow:visible; 
   position:absolute;  
   background-color:#DFDFDF; 
    
} 
 
#vertnav li {  
	position: relative;  
	width: 12em; 
    background-color:#DFDFDF; 
    border:solid 1px #CECECE; 
    border-bottom:none; 
   display:block; 
   height:1.5em; /*auto */ 
   margin:0; 
   float:left; /*fixes a gap in IE when hover is over a li with a next level*/ 
} 
 
#vertnav a { 
    text-decoration:none;  
    display:block; 
    padding: 0.1em;   
    margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */ 
    background-color:#DFDFDF; 
    width:11.5em; /*helps IE with hover */ 
    height:1em; 
} 
#vertnav a:hover{ 
    background-color:#0099CC;  
    color:#FFFFFF; 
} 
 
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{ 
    display:none;  
    position:absolute;  
    top:0;  
    left:12em; 
} 
 
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{ 
    display:none;  
} 
 
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{ 
    display:block; 
} 
 
li>ul {  
	top: auto; 
	left: auto; 
}

I just tried it out in Opera 7.2 the vertmenu stoped working so back to the drawing board.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Ok since the problem only seems to occur in IE we could use the Holly hack from www.positioniseverything.net to target just IE

 
/* Win IE only \*/ 
* html #vertnav li{float:left;} 
/* end holly hack */ 

Let me know if you still have troubles with it.

memcinto
Offline
newbie
Last seen: 9 years 50 weeks ago
Joined: 2004-05-06
Posts: 3
Points: 0

http://www.csscreator.com/menu/multimenu.php

Hi, thanks for your prompt response to my messages. I'm still having the same problem with the Holly hack, that is the main menu items flow from left to right across the page instead of lining up vertically on the left:

without the Holly hack: http://eebweb.arizona.edu/testing/vertical2.htm

with the Holly hack: http://eebweb.arizona.edu/testing/vertical.htm

I am using IE version 6.0.2800 SP1. I also have some screen shots in case the behavior doesn't appear for you:

http://eebweb.arizona.edu/testing/screenshots.htm

Thanks!!!

-- Margrit[/img]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi memcinto,
If you resize the window you can get to a point where the li's line up correctly.
So we need to restrict the width of the main container.
Try setting the width of the top ul eg:#vertnav{width:12em;}

Hope that helps

ninjadelanuit
Offline
newbie
Last seen: 9 years 49 weeks ago
Joined: 2004-05-08
Posts: 3
Points: 0

Nest list format

Hi everybody Smile
I'm trying to make a multiple level menu with the wonderful solution proposed here. My problem is that the nested list that I must use (generate by a cms in php) has a very little difference with the one's used here.
He re is my list format :

<ul> 
  <li>About 
    <ul> 
      <li>test</li> 
    </ul> 
    <ul> 
      <li>text2 
        <ul> 
          <li>First Post</li>
          <li>test2</li> 
        </ul> 
      </li> 
   </ul> 
  </li> 
  <li>Home</li> 
</ul>

The problem is that with IE5 or 6, the fist "test" doesn't appear !
That because the <ul> tag is closed and then reopen for the rest of the list... With Firefox all is ok, but with IE...
Is there a solution by changing something in the javascript ? Because I can't achieve to change my nested list format Sad
If someone has a solution, it would be much appreciated...
Tx

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi ninjadelanuit,
Currently the menu only targets one UL within a LI.
Try changing

Quote:

/* assign the function to the LI */
lis[i].onmouseover=function() {

/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}

To
 
 /* assign the function to the LI */ 
             	lis[i].onmouseover=function() {	 
 
                /* display the inner menu */ 
                  var uls= this.getElementsByTagName("UL"); 
                  for(Var s=0; s< uls.length; s++){                   
                       uls[s].style.display="block"; 
                   } 
                } 
                lis[i].onmouseout=function() {                        
                   var uls= this.getElementsByTagName("UL"); 
                   for(Var s=0; s< uls.length; s++){                   
                       uls[s].style.display="none"; 
                    } 
                }

I haven't tested this out.

Hope it works.

jhodges
Offline
newbie
Last seen: 9 years 49 weeks ago
Timezone: GMT+6
Joined: 2004-05-08
Posts: 3
Points: 0

lining up the list

Trying to implement this solution for a vertical menu.. when I mouse over the various links that activate the submenus, i get a 'flicker' in IE.. the various solutions proposed to solve this generally seem to be be based on using images for backgrounds, which I am not doing.. any Idea why my code in particular might be 'flickering'? when I view the demo it works great using the same browser.. any suggestions would be appreciated.

jhodges
Offline
newbie
Last seen: 9 years 49 weeks ago
Timezone: GMT+6
Joined: 2004-05-08
Posts: 3
Points: 0

Re: lining up the list

jhodges wrote:
Trying to implement this solution for a vertical menu.. when I mouse over the various links that activate the submenus, i get a 'flicker' in IE.. the various solutions proposed to solve this generally seem to be be based on using images for backgrounds, which I am not doing.. any Idea why my code in particular might be 'flickering'? when I view the demo it works great using the same browser.. any suggestions would be appreciated.

well, no sooner than I posted it did I figure it out.. I was running overlib as well which apparently has a 'clear' function that was making the div disappear..

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 45 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Light Weight Multi Level Drop Down Menu

Hi jhodges,
Glad you found the solution. Smile