Drop-Down Menus, Horizontal Style

by {embed="embeds/article-authors" entry_author=" Nick Rigby" entry_username="nickrigby" entry_id="14798"}

296 Reader Comment{if "296" > 1}s{/if}

Back to the {if "articles" == "columns"}Column{if:elseif "articles" == "blog"}Post{if:else}Article{/if}
  1. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Al, what would a menu system like this cost on PVII?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  2. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Liteweight, fast, horizontal..just what the client ordered.

    Thanks for the great article. Many minutes will now be spent converting older sites in our stable and ridding them of bloated javascript.

    It’s like a laxative for flyouts.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  3. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Dear Al,

    The article’s focus is on markup and CSS, not scripting, and we’ve heard of just one possible problem:

    http://www.alistapart.com/discuss/horizdropdowns/2/#c8668

    I believe the problem described in that post has to do with bugs or limitations in Konqueror 3’s CSS support, and nothing to do with the brief script, which is there merely to work around potholes in IE/Win.

    If you know of genuine problems with the script or with any other part of the article, you’d be doing readers and us a service by listing the issues. Since concern for “newbies” was your motivation in posting, I’m sure you’ll want to help those folks by sharing your technical concerns about the article.

    You may be approaching the article as you approach the excellent software your company develops and sells. But software products and tutorials serve different needs and arouse differing expectations. Your software has to be bullet-proof. That’s what your market requires.

    But an ALA tutorial is different from a commercial software product. It’s a useful or innovative idea, put before the community at no profit, as open source. We test in most Mac and Win browsers before approving an article, but we never claim anything we publish is unimprovable. An ALA tutorial would be no use at all if it were perfectly self-contained. The whole idea is for readers to take it and run with it, and, in doing so, to improve it.

    Lastly, you said:

    “Many people read this site as if it were written excathedra.”

    Do they? Most of the readers I’ve encountered are pretty sophisticated, not only about design and technology, but also about the fallible nature of anything published online (or offline). Some of our readers are less experienced than others, but I don’t see how they’re harmed by gaining access to a fast, semantic, lightweight drop-down menu that is easy to implement — and free. So what’s the problem?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  4. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Nice article Nick. I found it helpful and I really like the reuse of the suckerfish drop downs script. Even though I don’t like drop downs, vertical or horizontal, I did like the article, the css and your approach.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  5. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Hi Neill,

    It would likely be in our Tutorials section and free – like the other ones in there :-)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  6. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Hi Jeffrey,

    You wrote:
    “But an ALA tutorial is different from a commercial software product. It’s a useful or innovative idea, put before the community at no profit, as open source”

    You misunderstand my motivations as you obviously misunderstand what we do at PVII. The vast majority of content on our site, including various menu systems, is free. Our “products” are a different animal completely and involve GUIs that run inside Dreamweaver. Most of your readers would have little use for them unless they used Dreamweaver, of course.

    The technical imperfections in the technique described in this article were mentioned in a few comments posted before mine :-)

    While the readers you interact directly with may perceive the information in the articles you publish as inspirational or provocative, the folks I interact with place this site’s content on a much higher level. They could be described as being in awe.

    So don’t take my little post here as anything more than an honest assessment by a reader who finds your content very interesting.

    If this menu technique comes up for discussion on our CSS newsgroup I will make it a point to contact the author so he can take part in the discussion.

    Best,

    Al Sparber

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  7. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Nice. I especially like the accessibilty of this menu.
    It doesn’t seem to be working in NS6.1 on win though.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  8. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    behavior:url() would seem the appropiate way for IE, but then you loose compatibility with IE5+ on MAC.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  9. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Thanks for publishing the article. It may be a copy, but I hadn’t seen the “original”!

    As for non-mouse operation, i’ve tried this in ie & firefox (you can access the top level menu, but not sub-menus) opera (can’t seem to access any links by tab button).

    If this can be fixed, and the issue of css on and javascript disabled, it would be a very good, simple menu!

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  10. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I was reading an article on the web somewhere, where a person was making the arguement that drop-down menus were unuserfriendly. They were making the assertion that the problem with cross-browser compatitbility and even general usefulness doesn’t justify its use, I mean I could immediately come up with some counterpoints but, he offered up some good opinions regarding the matter.

    I was wondering what you all thought, do you think Drop-down menus are an effective form of site navigation or do think the usability especially for visitors with say screenreaders warrant their use?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  11. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    my answer is: depends… put the info in the right place and it will always be useful IMHO.

    on your second point: accessibility is something different than usability. :)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  12. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Our current web sites have been plagued with DHTML drop down menus for the past 2 years, and I think this article and the Sucker Fish one have pointed me in the right direction…

    Except for a few things…

    I am currently using a horizontal navigation bar (like Sucker Fish) with graphics and vertical drop downs with text for sub menus.  My issue has to do with the width of the submenu and the length of the text.

    I have found the way to stop the text from wrapping, but the borders do not line up properly…  I have the menu working fine without borders, but that is the look and feel that is currently being used in the bloat versions.

    I figured I would post in this question just in case somone else needed to expand the width of the submenus of a horizontal menu.

    here is the current site:

    http://www.dsionline.com

    here is the example:

    http://www.dsionline.com/nav


    if you see something that looks odd, let me know because after all, I’m just a Flash Expert ;)


    rascalpants
    New Media Designer

     

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  13. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I have to say I have seen a lot of great article on this site.  Yet this one stands out because of how simply it is while at the same time been so useful.  So, I would like to extend my THANKS to you.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  14. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’ve started using CSS lists not too long ago.  I didn’t know how power CSS was until I saw how it could transform simple bullets into beautiful menus. :)

    I found a site a while ago that shows many different types of menu styles as well.  You can find it here: http://css.maxdesign.com.au/

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  15. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    >> Our current web sites have been plagued
    >> with DHTML drop down menus for the
    >> past 2 years…

    Although I’d agree that most of the Javascript-driven menus are implemented badly, is there really anything wrong with DHTML menus in theory?

    I think Javascript has a bad rap. If implemented in a degradable, non-intrusive manner, DHTML menus can be just as “good” as CSS ones, and potentially a lot more flexible, too, allowing us to not necessarily rely on the quirky :hover implementations of certain browsers.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  16. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    If you take a look at the current source code the runs the menus on our sites, it take 3 or 4 files with hundreds of lines of code on each to run a simple drop down menu… 

    but my main problem is that it does not work some of the browsers that we are targeting…  our audience is uses IE 6 most of the time, but sometimes we have IE 5 and 5.5 users still…  and even an IE 6 build or revision will screw everything up…

    I tested this articles solution in my environments, and it worked the same in each of them… 

    now I just need a little tweeking to be done to make it look the same as before…


    rp

     

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  17. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Thank you very much Nick Rigby. This is an excellent article. For me this is an easy way to build dynamic menues using css.
    Best regards. eigeneachse

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  18. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Accessibility is something different than usability?

    That wrong impression is what makes a lot of people spend big amounts on useless accessibility redesigns right now because “it is the law”. If usability means cutting down on accessibility then you can safely say that either the accessibility requirement is from another planet or your usability measure is developed in a bad way.

    Accessible sites should also be usable, by definition. A lot of the “but this isn’t accessible” posts and emails these days are based on technological problems (false browser, unknown facts about screen readers) than real usability issues for users with disabilities and assistive technology.

    If you separate accessibility from usability then you are in for a rude awakening when you really have to work for users with accessibility needs.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  19. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Now we’ve seen thsi tech before; it doesn’t take a genius or experienced developer to figure their own way of coding a suckerfish drop down horiZontialy.

    ALA has done this before; any remember the countless drop shadow techs that were publishe done after another????

    In the articles defence they did show something different; but i mean cmon; there has to be more creative articles that can be written; discussed and abused by users who hate repeated un-creative not thought out work.

     

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  20. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I was looking for a good CSS menu example when I came across this article.  Unfortunately it didn’t do what I wanted it to do, since I needed a horizontal menu bar at the top followed by pull-downs.  On top of that I need the pull-downs to have flyouts.

    Well this article inspired me and I did get a working example of full fledged menu.  Go here to check it out and let me know what you think.

    http://www.frinc.com/personal/charles/cssmenu/

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  21. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Thank you very much for providing this article.  As a casual web developer trying to get some stuff done quickly, I find your site extremely helpful and easy to use.  You do a great job making obscure things usable by those of us who, sadly, don’t have time to become experts.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  22. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Display:none is not a good way of showing and hiding elements, as you do hide them from several screen readers that way, effectively making them “dead” markup1. Try considering the off-left technique instead [2].

    [1] http://www.alistapart.com/articles/fir/
    [2] http://css-discuss.incutio.com/?page=ScreenreaderVisibility

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  23. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Does anyone tried to make it horizontal?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  24. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    There are a lot of comments above about cross-browser compatibility, loading speed and horizontal menus.  Take a look at the successor to the article which started all this for solutions:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  25. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Is it me or does this menu flicker horribly within any Netscape Browser?

    Until this is sorted I wouldn’t consider using it, as Netscape constitutes 7% of the visitors to my site.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  26. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    We’ve deleted a message impugning the motives of a poster here, along with the poster’s response. Discussion of an article’s pros and cons is welcome here; personal quarrels are not.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  27. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    If your site can be accessed on a mobile phone by a blind person via a screen reader it is accessable.

    If your site can be successfully navigated by my mum, it is usable.

    You could argue however that in order for a site to be considered accessible by everyone, it must be usable. Therefore accessability is a subset of usability, or a chapter in the usability book, if you like!

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  28. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    While toying with this code a bit I had an idea that may enhance the menu.  Instead of setting the nested menu’s display to none, how about using Image Replacement (whatever flavor you prefer) to replace the non-hover nested list with an arrow absolutely positioned to the right.  Then apply all of the other styles to the hovered nested list.

    The effect: having a visual signifier that the top level li has a sub menu, all without adding any extra markup.

    I’ve got an example that works in Firefox, but I haven’t tried any other browsers.

    And I hope what I said makes sense to somebody…

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  29. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I think its clear that complaining about these articles is like being invited to a friend’s for dinner then complain about the food… its bad form.

    However.  I think that some of these complaints are posted with the desire to improve on this forum rather (as with some) to simply deride it.

    May I suggest the following:
    – articles receive a preface outlining things like possible overlap with previous known articles on the site – perhaps it could be set up in a list style with links to those articles – acknowleging possible overlap (or overlap with stated modification) would help clear some confusion – though I think this happens seldom

    - Perhaps you could offer a suggestion box for those who feel they have valid suggestions or complaints could provide you (rather than the writer of the article) with feedback.  This could contribute to greater user-satisfaction, no?

    I think a valid criticism mentioned earlier stems not from an unappreciation of the content but rather a failure to provide adequate description/preface or organizing for directing the appropriate audience.  And with the wealth of information and the range of users-skills involved this hardly should come as a surprise.

    Personally, I have benefitted, from this site and the book, & have been brought up to speed at a ridiculously faster rate than without either.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  30. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    In my example (link in previous comment) I assigned the arrow using this method:

    .HasChild
      {
      background-image: url(arrows.gif);
      background-position: right;
      background-repeat: no-repeat;
      }

    You do have to assign the class to the li that has a submenu manually, but that removes the dependency on JavaScript.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  31. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Sniffer,

    I tested in Netscape 7 and 7.1 and there should be no flicker. What version are you using and what OS?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  32. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I viewed your menu in IE 5 on Mac OS X and the dropout menus don’t work.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  33. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Still learning this CSS thing, in your article you mentioned applying the “Holly Hack”.

    Being that I’ve never used any of these workarounds, where does it go in your file?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  34. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    After reading HTML Dog & other comments, I can see that I was off-topic. I meant no disrespect. Sorry about that. I was under the impression that this was the place for discussing Jeffrey Zeldmen’s comments on his site as well as the author’s comments. It seems that I wasn’t paying much attention. I subscribed to Jeffrey’s blog entry via RSS feed to keep track of the articles here. Thus, I subconsciously put 2 & 2 together to conclude that anything that Jeffrey & the author wrote was on topic. My bad. I apologize. If I caused any problems with anyone, then I ask forgiveness from each person.

    On another note, I said, “On an unrelated note, I don’t understand why people might not like menus. I, personally, love them. I like them, but Zeldman doesn’t. I’m not a professional web designer, but he is. Coincidence? I hope not. :/ ;)”. I meant that as a self-deprecating joke, & if I understand correctly, that came as the exact opposite. I do believe that he is the master & I am the beginner & the joke was meant to highlight that. Humour isn’t my forte. My conscience is bothering me & I need to know: did I cause offense?

    Lastly, thank you very much to Jonathan Snook & Jeffrey Zeldmen for explaining why these menus are no good. I’ll try to avoid them as much as possible. I think that you just saved my father’s web site from great misfortune. I am literally in the middle of a redesign.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  35. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I understood the javascript in the article and was able setup the menu fine, but I would like to use a nested menu and so I tried using the modified scrpit above “Improvement on the JavaScript | by Tom”  I can’t get it to work though.  Could someone explain what needs to be done to the javacript or html in order for this to work?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  36. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I liked the suckerfish menu lots.  And drop down menus are good for those that want to have simple to find links to other pages on there menu.
    I am just in the process of changing my menu over to a the dropdown suckerfish menu.
    http://www.carsinlondon.com/seo-techniques.html and it works just fine.
    Now if MS could just fix there a:hover blindness so we wouldn’t have to use js that would be great.
    bobmutch

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  37. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Imho :hover should only be applied to links since allowing any element to be hovered would not be seperating behaviour and structure. :hover should stay as it is in IE: just for links.

    Why does ALA let this be published? It’s the exact same thing as the Suckerfish article only the menus are horizontal. With this article, imho, ALA is like a bad TV show: it repeats plot lines (content) of old episodes (articles).

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  38. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Have tested http://www.alistapart.com/d/horizdropdowns/horizontal2.htm and http://www.alistapart.com/d/horizdropdowns/horizontal.htm in Netscape 7.1 and Mozilla 1.6 on Windows 2000 PC.  The sub menus only appear when you scroll over the pixels of the text within the main menu.  If you run your mouse along the word then it will flicker.

    Also concerned by David Lees comment that it doesn’t work in IE5 on Mac OSX.

    If you sort these issues out then I could be persuaded to use it!

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  39. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Hi all,

    I’ve updated my version of the CSS menus that has no technical limit on how deep you can go.

    It has a horizontal menu bar at the top, then pull downs and flyouts.

    http://www.frinc.com/personal/charles/cssmenu/index2.htm

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  40. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Is it possible to have this done with a horizontal menu at the top of a page?

    Thanks

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  41. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    The submenu seems to be transparent even when I set a background color to it and the text it is placed over bleeds through. Can someone explain why this is happening? Thank you.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  42. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Sniffer.

    I have tested both Netscape 7 and 7.1 on a Windows 2000 based PC, and have discovered no problems.

    Anyone else experiencing problems with this setup?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  43. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    this is pretty cool, it’s what i was looking for from a google search.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  44. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    … :hover should only be applied to links since allowing any element to be hovered would not be seperating behaviour and structure. …

    Exactly the opposite. By allowing only the links to respond to mouseover events, you assigning a specific behavior to a specific structural element, which is as far from separation, as it can be. Structurally, a link is just a reference to some document or location within some content; traditionally the links were indicated by underline and blue color – this is the essence of nailing presentation (and behavior, too) to the content, which we are trying to avoid now.
    Allowing ANY element to detect user actions and respond to it would give the designer greater control over presentation and behaviour of the visually neutral content.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  45. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    It’s possible that I may have missed it if someone mentioned this earlier. Has anyone addressed the z-index issue? When the sub menu isn’t flush against the right side of its parent, the lower ‘li’ shows above the submenu. Any thoughts?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  46. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Hi,

    My name is Mathieu Synnett and i’m an student in multimedia. Please scuse my english.

    Then i needed to do a drop down menu for a web site. I tried your’s but when we add a sub menu into an another it don’t work. The sub-sub-menu appear at the same time than the sub-menu. I have no knowledge in javascript then, i can’t resolve this problem for you.

    P.S. The example in dutch is work but i don’t understand it.

    if you understand or not please answer me at info@msmedia.ca

    Thanks a lot

    Mathieu Synnett

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  47. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    How can I do this horizontally? (just kidding)

    I do have a question. Does anyone have an idea how to keep the top-level menu highlighted when the mouse moves into the submenu? I would love to eliminate the sole reason for depending on JavaScript.

    By the way, this article – and its Suckerfish inspirer – are excellent. I appreciate every technique I read on this and other helpful sites, whether I use them or not. Otherwise, I wouldn’t visit the sites. I also like the productive discussion entries, but I certainly don’t need to read complaints without solutions.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  48. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Great Work !

    I was looking at this article and the suckerfish one earlier and that one works ok
    but when i stack button on button it causes all sorts of trouble, i dont know if this makes sense but i list the buttons horizontally say 4 lists then 4 flush on the bottom of those so i try to dropdown a button on the topline it causes the other menu to shoot down to the bottom, is there a way around this so it overlaps ? Sorry, im a newbie : ) It would be cool to stick with CSS for all this

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  49. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Like several others, I spent long hours applying my limited CSS/Javascript knowledge to the suckerfish article to acheive this effect, but finally gave up. Now I got it to work! Thank you.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  50. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Works it also for more menu depth than one level?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  51. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I thought the whiners were being too bitchy about repetition. If I had the suckerfish article only, being the novice I’m, I would have gotten stuck. Right now I can probably fiddle around with the existing horizontal menu to get it up on my site. But the one problem is that the submenus of the submenus pop up as soon as we enter the higher order submenu. Someboyd pointed it out earlier by adding a third laye or UL in the “About” section of the example given. Can somebody help me out and explain how to rid of this little problem?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  52. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    The background in li a not only has to be declared, but it also can´t be transparent.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  53. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    First, I like how lean the code is with this method of what my company calls “DHTML menus”, for lack of a better term. Our JavaScript code for this was getting pretty snarled, but I think I can use this code to make things much better.

    Second, for those who don’t like hover menus, just about every GUI OS I know uses hover menus, unless you exclusively use keyboard shortcuts. Click on the “File” menu on this window to see what I mean :)

    Third, here’s my question. I’ve had at least one site where I needed both a DHTML element and a bulleted list on the same page. I wanted to use the default display for the bulleted list, but when using the ul and li tags for DHTML and JavaScript similar to what this article uses, the bulleted list (obviously) was not displaying in its default matter. Any suggestions for this? I was hoping there’d be a solution that doesn’t involve me writing out a separate style for the bulleted list :)

    PS: First time posting here, and I’m not heavy into CSS stuff (yet). Thanks for reading!

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  54. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Jeff: Simply give your menu ul an id, say “menu”. So the CSS rules for the menu would be changed to only work on this one ul.

    The CSS rule selectors would become:

    ul#menu
    ul#menu li
    ul#menu li ul
    ul#menu li a

    … etc.

    Then, you can style normal bulleted lists by selecting ul {…}.

    The article probably should have used this method so it is easier for people to incorporate it into pages with other ul’s.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  55. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Seth,

    I thought of that, but it only works for the first level of menus. Here’s an abbreviated version of the style sheet I’m using now:

    ul#nav { }
    ul#nav li { }
    ul#nav li ul { }

    /* Styles for Menu Items */
    ul#nav li a { }

    /* Fix IE. Hide from IE Mac \*/

    • html ul#nav li { }
    • html ul#nav li a { }
      /* End */

    ul#nav li a:hover { }
    ul#nav li ul li a { }
    ul#nav li:hover ul, li.over ul { }

    It doesn’t seem to work when there’s a ul inside the li (which is inside the ul#nav). Any idea around this?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  56. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    • Chuck:
      To highlight the menu item in every menu layer, I think you need something like this:
  57. ul li:hover, ul li.over {
      background-color: #000;
      color: #FFF;
    }

    This should work since when the pointer is :hovering over a sub-menu LI, it must also be over the parent LI since it contains the latter.

    • Krishna:
      The problem you have with sub-menus is that this rule:

    li:hover ul, li.over ul {
      display: block;
    }

    is making all the sub-UL’s visible too. So you need an additional rule to hide them, e.g.:

    li:hover ul ul, li.over ul ul {
      display: none;
    }

    but then, you need a further rule to make the sub-menu visible when its parent is being :hovered over! E.g.

    ul li:hover ul, ul li.over ul {
      display: block;
    }

    • Jeff V:
      Seth’s suggestion should work! To expand a little, the problem you have is that the CSS rules are being applied to all UL and LI elements. What you want to do is apply these CSS rules only to UL and LI elements that are part of you menu. To do this, the top-most UL element of the menu should have an ID attribute containing a unique name (ID attributes must be unique!), e.g.:

    <ul id=“nav”>
      <li ….. etc. etc.
    </ul>

    And then change your CSS result to begin with #nav. NOTE: #nav refers to the top UL element itself and since the id it unique, it refers specifically to that HTML element only. E.g. the rule:

    ul { background-color: red }

    gives all UL elements a red background, whereas this rule:

    #nav { background-color: red }

    only gives the element with the ID of “nav” a red background. So back to your stylesheet, it currently begins:

    ul#nav { }
    ul#nav li { }
    ul#nav li ul { }

    But the problem here is that the browser will look for an element with an id of “nav” that is a child of a UL element! When you use the #id CSS selector, there’s never any point in prefixing it with any other elements since there is only ever one element in the document that could match. So instead write:

    #nav { }
    #nav li { }
    #nav li ul { }


    Hope this helps everyone!! (btw – I’ve not tested any of the examples here, but hopefully even if they don’t work, they’ll give you an idea of how to proceed).

{if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
{if ""}
Comments are editable for one week.
{/if}
Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Thanks for replying Peter. I tried to apply what you suggested, but it’s still not working properly. Here’s an online version of the page I’m working on:

    http://www.jhvj.com/test_dhtml.html

    Here’s an abbreviated version of the current style sheet:

    #nav { }
    #nav li { }
    #nav li ul { }
    #nav li a { }

    /* Fix IE. Hide from IE Mac \*/

    • html #nav li { }
    • html #nav li a { }
      /* End */

    #nav li a:hover { }
    #nav li ul li a { }
    #nav li:hover ul, li.over ul { }

    As you suggested, I used #nav rather than ul#nav, but it’s still not getting the result I’m looking for, which is having normal bulleted lists while having the DHTML menus on the same page. It’s fine for the first level, but it looks like having the UL inside of the UL is causing problems. Any more suggestions?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Oh yeah… I forgot about that! :D
    Since we’ve replaced the first UL rule with #nav, it now only gets applied to the top-most UL—hence the first level of the menu works fine.

    So to fix this, change:

    #nav {}

    to:

    #nav, #nav ul {}

    so in English it says the element with id “nav” and all UL elements below it. And I’ve even tested this, so I know it works this time!!

    HTH – Peter.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I have been fooling around with the css, but I have failed to find a way to make this into a horizontal menu. Does anyone know what I have to do?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Jeff,

    The easiest way to do this would be to wrap a div around the whole drop down menu. I will call it menu for this example. CSS would look like this

    #menu ul {
      margin:0;
      padding:0;
      list-style: none;
      width:150px; /* Width of Menu Items */
      border-bottom:1px solid #cccccc;
    }

    #menu ul li {
      position:relative;
    }
     
    #menu li ul {
      position:absolute;
      left:149px; /* Set 1px less than menu width */
      top:0;
      display:none;
    }

    /* Styles for Menu Items */
    #menu li a {
      display:block;
      text-decoration:none;
      color:#777777;
      background:#ffffff; /* IE6 Bug */
      padding:5px;
      border:1px solid #cccccc;
      border-bottom:0px;
    }

    /* Fix IE. Hide from IE Mac \*/

    • html #menu li { float:left; height:1%; }
    • html #menu li a { height:1%; }
      /* End */

    #menu li a:hover { color:#E2144A; background:#f9f9f9; } /* Hover Styles */
     
    #menu li ul li a { padding:2px 5px; } /* Sub Menu Styles */
     
    #menu li:hover ul, ul#menu li.over ul { display:block; } /* The magic */

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    It was the first time I read the drop-down like tutorial, and I liked even if it is a sort of ‘copy’ of the Suckerfisch-thing

    What I noticed is that when you’ve got several <ul id=“nav”>‘s on your site, only the first will work in IE and all the other won’t. So I addepted the js-file a little:

    <code start>
    startList = function() {

    if (document.all&&document;.getElementById) {
      var collUL = document.getElementsByTagName(“UL”);
      for (j=0; j<collUL.length; j++) {
    if (collUL[j].id==“nav”) {
    navRoot = collUL[j];
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes;
    if (node.nodeName==“LI”) {
    node. { this.className+=” over” }
        node. { this.className=this.className.replace(” over”, “”) }
        }
      }
      }
      //  navRoot = document.getElementById(“nav”);
      }
    }
    } window.

    </code end>

    That’s my contribution,
    Mathijs

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’ve read about your nice ‘accesibility’ questions, and you can easily use the AccesKey-property to make links accesible for non-mouse users, of course they need a keyboard…

    Another way is using the :active-pseudo class and the gotFocus-thing for IE
    (using a tab-like navigation style that is…)

    I also read the arrow-thing, wich I’ve created myself too, but in another way wich allows me to still have a background-picture and an arrow:

    <start css>
    .hassubs { background: transparent url(“arrow.gif”) no-repeat right center;
      width: 13px;
      height: 20px;
      padding: 0 0 0 0;
      margin: -15px 0 -5px 95 }

    ul li a:hover .hassubs { background-image: url(“arrow_over.gif”) }  /* Hover Styles */
    ul li a:active .hassubs { background-image: url(“arrow.gif”) }  /* Hover Styles */
    <end css>

    that’s the cdd-part, simply adjust the width/height/padding to your menus width/height/… a bit of trial and error :D

    in your html-code you need to do this:
    Services

    a simple paragraph, note that is important that the -tag is nested inside the <a>-tag as it postion is relative to it!

    Mathijs

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Is a nice idea, and many tutorials claim them to be very necessary, but if you look at the real user agents out there, you realise quite fast that providing them might be useless to the people who REALLY need them.

    http://www.wats.ca/articles/accesskeys/19

    is a nice article about them, and the problems we are having (shortcuts already been used for other things in the app).

    http://www.joeclark.org/book/sashay/serialization/Chapter08.html
    also explains some of the issues, and wondered some years ago when the browser support will get better ;-)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    [Mathijs]…when you’ve got several <ul id=“nav”>‘s on your site, only the first will work in IE and all the other won’t. So I addepted the js-file a little…

    The “id” attribute, as it was mentioned here before, is a unique identifier. It is not supposed to be repeated within one document. It will give you bad karma and seven years of bad luck (and that just a best case scenario).
    You can give your <ul>s a class, though, and do it as many times as you wish. Then look for it like this:

    if (collUL[j].className.indexOf(‘nav’)!=-1)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    is a bad tool to check for classnames, as it will also work if I have another class on it (elements can have more than one class) with “nav” as the name of it. Better to use RegExp:

    function checkClass(o,c)
    {
    var re=new RegExp(’\\b’c’\\b’);
    return re.test(o.className);
    }

    o is the object to check, c is the class name.
    returns true or false.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Peter and Nick, thanks for replying, both of your ideas worked fine for Mozilla, but I was having trouble getting it to work properly in IE6. Then I (finally) found out what I was doing wrong. Here’s an abbreviated form of my final stylesheet:

    #nav, #nav ul { }
    #nav li { }
    #nav li ul { }
    #nav li a { }

    /* Fix IE. Hide from IE Mac \*/

    • html #nav li { }
    • html #nav li a { }
      /* End */

    #nav li a:hover { }
    #nav li ul li a { }
    #nav li:hover ul, #nav li.over ul { }

    Note that the first line applies Peter’s solution. Now note the last line. I had to repeat the “#nav” after the comma for it to work in IE6.

    Working example located here:

    http://www.jhvj.com/test_dhtml.html

    Thanks for both the article and the help. Hope to see more good articles from ALA in the future :)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    [Chris]..is a bad tool to check for classnames, as it will also work if I have another class on it (elements can have more than one class) with “nav” as the name of it…

    Not following… do you mean <ul class=“nav nav”>?

    collUL[j].className.indexOf(‘nav’) will find all elements, which have ‘nav’ in a class name, regardless of how many different classes are applied to them.
    It will, however, also find elements (if there are any) with class names like ‘navlink’ and ‘navbar’.

    Your RegExp should also return true on all elements with class=“nav”,  class=“nav and whatever else”, etc.
    It will skip ‘navlink’s and ‘navbar’s, though, so it is more precize.

    That I agree with wholeheartedly.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    A fix for the <select> tag overlap problem in IE|Win (based on the earlier entries in this discussion), multi-level vertical menu:

    http://www.gerasimenko.com/domstudies.html

    IE6.0.2 Win | Firefox0.9 Win | Safari1.2 OSX

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Great article.  I look forward to the point when we won’t have to use JavaScript at all.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    It seem to me a little complicated due to incopatibilities in browsers.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Sorry if this has been said, but 13 pages of feedback is too much to wade thru.

    My 2cents is, a LI immediately followed by a UL is only (in structural terms) conincidental.  There is no real tie b/w the two.

    Why not say, a LI can only list an anchor.  I.e. it is a leave node in the menu.  Simpler … yes?

    But, a DT (again in structural terms) always pairs with a DD.  Make the DT a “submenu name” and the DD a “submenu definition”.  Then, naturally, the DD would own a lot of leave nodes and maybe more submenus.

    This would more closely model the most common resource file structures (Win/X/Mac/OS2/etc…) and, IMHO, make the menu a little more structured (there’s that word again!).

    Plus (and not a small plus), the CSS changes from:

    li > ul { … }

    to:

    dt { … }
    (or dl, dd, whatever)

    The former, however prefered, is not supported in the “market share” browser.  But the latter would be interpreted correctly in all browsers.  And maybe a little bit of the hacking can be deleted (alas not ALL the hacking).

    What say you?

    iwanttokeepanon

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’m a newbie, so maybe this is obvious to everyone else, but when I put this menu in a left div, the submenus are mostly hidden behind the right div.

    What am I missing?

    Thanks!

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I been messing around with the css, but I can’t figure out how to make a horizontal version of this. Does anyone know how to do this?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    mwylde, check out http://www.alistapart.com/articles/dropdowns/ for how to make a horizontal dropdown menu. You can see a working example of this at http://www.htmldog.com/articles/suckerfish/example/.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’m relatively new to using CSS. I use Blogger with my site, and I was hoping on installing this menu to my site. I had some troubles, but eventually everything began to work perfectly. I had to edit a few other ul’s and li’s from things on my site using them already, but I got the menu working.

    But then I came to a problem with the other parts of my site using the li and ul tags. I narrowed the problem down to the Holly Hack that had to be used for IE.

    Is there any way that you can set up the Holly Hack so it only effects specific ul and li tags with a specific class? In this case, the class I used for the drop-down menu was called navigation.

    Any help is greatly appreciated.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    That is!
    DL/DD works better than UL/LI,
    ‘list-style: none;’ drops,
    and DD looks identical in all browsers.
    (It seems that MSIE renders wrong UL/LI ‘padding’ and/or ‘margin’ with ‘list-style: none;’ ?)

    I think that DL/DD is better.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’ve been studying this for way too long…

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    I’d like to Nate’s (http://alistapart.com/discuss/horizdropdowns/9/#c8763) example of using an arrow in place of invisible sub menus.  I think I get what he’s saying, but in my mind it’s impossible without some nasty javascript.

    I mean, how else could you replace an entire <ul> with an <img>?  Plus, everything BUT the <img> would have to be invisible, right?  Really, wouldn’t Chuck B.‘s (http://alistapart.com/discuss/horizdropdowns/8/#c8754) use of classes be easier to maintain?

    C’mon, Nate: give us a URI!

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Chris (http://alistapart.com/discuss/horizdropdowns/9/#c8757) brought up an excellent issue about display:none not being visible to screen readers.  Why not use visibility:hidden instead?

    The Suckerfish method /is/ different.  It does a lot of complex stuff with float styling which keeps submenus visible to screen readers.  If what I’m suggesting works, then the Rigby method maintains the section 508 compliance of Suckerfish sans some of the complexity (for menus with only one sublevel).

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Peter (http://alistapart.com/discuss/horizdropdowns/12/#c8802) addressed a lot of issues in theory, but his code isn’t working for me, and I was wondering if anyone else had success with it?

    In “keeping the top menu highlighted”:

    ul li:hover, ul li.over {
    background-color: #000;
    color: #FFF; }

    Every attempt I’ve made to style inside the <li> has failed.  I think you must style inside the <a>.

    Also, the pseudocode above is redundant.  All <li>s occur within <ul>s, so you can drop the <ul>.  In a case like this, <ul> is only meaning when used at least twice: “ul ul li.”

    This same flawed reasoning affects Peter’s explanation about “sub-sub menus.”  I’d really like a solution to this, because I want to build a menu that nests four levels deep.

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    As for the <dl> talk on page 14 (http://alistapart.com/discuss/horizdropdowns/14/#c8817) (http://alistapart.com/discuss/horizdropdowns/14/#c8829):

    To quote Chris (http://alistapart.com/discuss/horizdropdowns/8/#c8752):

    “If you separate accessibility from usability then you are in for a rude awakening when you really have to work for users with accessibility needs.”

    <dl>s are for lists of definitions.  Menus are not lists of definitions.  Imagine being blind and running across a menu that your screen reader treated like a list of definitions.

    I found out about thanks to a book by Zeldman (so I’ve already shown my gratitude by paying the man).  He does a lot of preaching when it comes to X/HTML structure, both in print and on this (his) site.  One of his sermons, to paraphrase, is that tags should be used for their intended purposes.  I’m no acolyte, but he has his points.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’m not sure if this has been asked or answered before; I don’t really have the patience to sift through 13 pages of comments. I’ve been trying to get multiple menus onto one page. I need six in total. Now, with Firefox it appears that having multiple drop-down menus will work with the current CSS and JS, but it doesn’t work in IE. Is there a different JS I should be using to allow IE to acknowledge the second menu?

    What I mean by this is that I have six sets of images seperated and I want them all to have the drop-down menus. Now, I tried leaving the original <ul> tag open (if that makes sense), creating the code for all six sets and then closing the <ul> tag, but that only led to more problems—IE would jumble the positions of the images. When I say “jumble”, I mean “how in the hell did it move from the bottom of the page to the top” jumbling. If I close the <ul> tag off and start a new one for each set of images, then only the very first drop-down menu is functional in IE.

    I would greatly appreciate any help. Thanks in advance.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’ve tested this out and it does work with a few caveats.

    To accomplish this I created a second complete menu with its own base UL and assigned a DIFFERENT id to it than the first menu.  You then edit the .js file to assign the IE workaround to the LI tags of both menu ids.

    Here’s the rub though, if the pull down items from menu 1 go on top of menu 2 then the behavior of menu 2 will take effect and mess up the display.

    You can see an example here:

    http://www.frinc.com/personal/charles/cssmenu/index3.htm

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    we must rewrite the onload event, maybe we have another script that uses the onload event and it becomes rewrite and some scripts can give error.

    [removed]
    ala=function(){alert(“ala”);}
    window.onload=ala;


    initMenu=function(){
    alert(“init Menu”);
    window.$onload();
    }
    window.$onload=window.onload||function(){};
    window.onload=initMenu;
    [removed]

    for example…

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Thanks, Charles. Now it all seems so simple. I didn’t realize assigning a different ID would work… probably because I didn’t edit the JS properly when I tried it. Thanks again, you’re a big help.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Okay, I’m having problems again. Having seperate ID works for Firefox, but of course, IE won’t accept it. Here’s a link to a textfile that contains the JS and CSS I’m using.

    http://shameless.allwoundup.net/js_and_css.txt

    Could someone explain to me what I’m doing wrong now?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Err, okay, that was a bad idea… txt files in browsers don’t work too well. But I’m sure you’ve all thought to just open it in Notepad or something.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Carl,

    I took a look at your JavaScript file and I think you are using a mix of my JavaScript and the one that Nick originally included with his article.  The difference is that my Javascript uses a recursive routine called AssignMenuEvents() and Nick’s does not.

    So in your example you are calling my function but you have it in Nick’s code, which doesn’t have that function defined.  Just take my whole JavaScript and replace “nav” and “nav2” with your menu ids:

      function StartList()
      {
      if (document.all && document.getElementById)
        {
        var node = document.getElementById(“nav”);
        var node2 = document.getElementById(“nav2”);

        AssignMenuEvents(node) ;
        AssignMenuEvents(node2) ;
        }
      }

      function AssignMenuEvents(pObject)
      {
      var node ;
      var vPreviousIndex ;

      for (i=0; i < pObject.childNodes.length; i++)
        {
        node = pObject.childNodes;

        if (node.tagName == “LI”)
          {
          node.
                      {
                      this.className+=” over”;
                      }

          node.
                      {
                      this.className=this.className.replace(” over”, “”);
                      }
          }

        if (node.childNodes.length > 0)
          {
          vPreviousIndex = i ;
          AssignMenuEvents(node);
          i = vPreviousIndex ;
          }
        }
      }

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Sorry the “theory” didn’t work out for you! My intent was to describe how these things work to aid peoples understanding rather than just post completed solutions. I have since tested and got the following examples (links at the bottom of this post):

    Highlighting Menus
    My CSS and theory here were fine, but I neglected to mention two things:

    1). You need to remove the background rule from the CSS for “ul li a”, e.g. make it look like this:

    ul li a {
      display: block;
      text-decoration: none;
      color: #777;
    /*  background: #fff; */
      padding: 5px;
      border: 1px solid #ccc;
      border-bottom: 0;
      }

    2). The JavaScript being used should be replaced with newer SuckerFish code. This newer code applies “onmouseover” and “onmouseout” events to all LI’s in the menu rather than just the top level of the hierarchy.

    With both the above done, the menu should have a highlighted item on each level of the menu.

    I have tested this in Firefox 0.9 and IE6 and they work. The original article mentioned problems in IE6 with not having a background colour, so this may create other problems which you’ll have to sort out for yourself! :-)
    You could for example leave the background colour in place but make the highlighting rules !important. But different vintages of MSIE have problems with !important…. and so the can of worms continues!

    Nested Sub-menus
    The sub-menu CSS rules were nearly correct. The theory was fine; it was merely the practice that was flawed!

    Again, the newer SuckerFish JavaScript is needed to make this work.

    The CSS for the 2nd menu level should read:

    li:hover ul ul, li.over ul ul {
      display: none;
      }

    ul ul li:hover ul, ul ul li.over ul {
      display: block;
      }

    The first rule was fine, but the second rule needed an extra UL at the start.

    Examples
    I have three example pages. The first is the original code as per the article. The second has the JavaScript updated and the highlighting rule in place. The third has a nested menu (its under About->History) in addition to the highlighting rule. Enjoy:

    1. http://clickindustrial.com/test/public/2004-07-12/original.html

    2. http://clickindustrial.com/test/public/2004-07-12/highlight.html

    3. http://clickindustrial.com/test/public/2004-07-12/nested.html

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Thanks for cleaning that part up, Charles. Once again, it still doesn’t appear to work on IE. I actually changed the menu IDs to “nav” and “nav2” and while it works without any problems in Firefox, IE doesn’t recognize either menu. Is there anything else I should be aware of that might fix this problem?

    This wouldn’t be a problem if no one used that inferior browser.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I use IE 6.0 on WinXP pro.

    I have found that if you put a space after the link text and before the closing a it stacks nice and neat.

    example:
    <li>Home</li>
    <li>About</li>
    should be:
    <li>Home </li>
    <li>About </li>

    Gotta love IE…

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Carl,

    You have to call the StartList function from the body tag <body onload=StartList();>

    Maybe you can post a link to your test site so I can take a closer look?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    That did the trick. Thank you very much, Charles. You don’t have to waste your time examining my code, the menus work fine on both IE and Firefox now. I really needed this to work —not being able to complete the index page was really impeding my progress—so you’re a big help. Thanks again.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    You can stack several functions in one onload event thus:

    window.onload=function(){
    funcion1();
    function2();
    }

    You can also use a clever addEvent function, but they are not 100% cross-browser:

    http://www.scottandrew.com/weblog/articles/cbs-events

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Having created my first CSS layout based site, these menus looked to be the perfect answer to my problem and I managed to get them working first time.

    However, when I try to use list elements anywhere else on my site, they automatically inherit the attributes of the menu, I understand why but despite reading everything I can get my hands on, I’m at a loss as to how to then revert to normal list formatting for my other lists. Any suggestions on a resolution would be fantastic as I’m a little lost despite numberous attempts to fix.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    edit your css and add the id of your base menu before all of the UL LI classes in the following manner:

    #nav ul
      {
      …
      }

    Or use a explicit class name that you assign to your menu like so:

    .MenuBar u
      {
      …
      }

    I chose the second method.  See my css by linking to my site by clicking on my name above.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    That was supposed to be

    .MenuBar ul
    {

    }

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I could not tell where the additional code should be added when improving the lists.

    Also, for the “thing” to be useful I need to know what is in the .js file.

    So it does not work for me and I cannot use it.

    Or have I missed something?

    Barry Hooper

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Has anyone else noticed that this still doesn’t work properly in IE 5.2 on the Mac?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    This is the code i have for my menu :

    <style type=“text/css”>

    body {
    font: normal 8px verdana;
    }
    text-align: left;
    padding: 0;
    margin: 0em;
    }

    p {
    margin: 0em 0em;
    }


    #nav, #nav ul {
    float: left;
    width: 94em;
    list-style: none;
    line-height: 1;
    background: #E8E0D2;
    font-weight: bold;
    padding: 0;
    border: solid #ffffff;
    border-width: 1px 0;
    margin: 0em;
    }

    #nav a {
    display: block;
    color: #FF6600;
    text-decoration: none;
    padding: 0.25em 0.5em;
    }


    #nav li {
    float: left;
    padding: 5;
    width: 10em;
    }

    #nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 17.4em;
    w\idth: 12.7em;
    font-weight: normal;
    border-width: 0.1em;
    margin: 0;
    }

    #nav li li {
    padding-right: 0.25em;
    width: 12em
    }

    #nav li ul a {
    width: 12em;
    w\idth: 9em;
    }

    #nav li ul ul {
    margin: -1.75em 0 0 14em;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li

    li.sfhover ul {
    right: auto;
    left: auto;
    }

    #nav li:hover, #nav li.sfhover {
    background: #002448;
    }

    li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    }
    /* Fix IE. Hide from IE Mac \*/

    • html ul li { float: left; height: 1%; }
    • html ul li a { height: 1%; }
      /* End */

    </style>

    the problem im having is figuring out how to change the text colour when an object is highlighted, at the moment it stays orange i would like for it to be white when its in the hoverstate

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I was searching for a horizontal menu for about a week.I did find them on the other sites but its was difficulty to study the menu.Sometimes I just thought of just inserting all the links separate. But when I found this one its was the simplest of all, thanks a lots.Because Now I can make my own menu with your help CHEERS.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    This trick works perfectly for me, but I don’t understand why.

    The magic:
    li:hover ul, li.over ul {
    display: block; }

    I see how this opens the menu when the pointer moves into the <li> element. What I don’t understand is how the menu stays open. The way I understand it, it should close when the pointer leaves the <li> element (as it won’t be :hovering any more), but it stays open while the mouse pointer in in the <li><ul> element.

    Sorry if I’m missing the obvious.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I am working on a redesign for my site and i have the menu working but when there are spaces in between the expansions IE wont allow you to go to the next one. Also it seems hard to hover to the expansion but maybe thats just me.

    the link is: http://css.eternalfireproof.com

    It works fine in FireFox except it seems hard to hover to the expansion.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I noticed at the end of the article:

    Mystery IE6 Bug:

    During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.

    but I tired adding a bg to li a and it still didnt work.

    you can see my stylesheet here:
    http://css.eternalfireproof.com/css/eternal_layout.css

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Everett,

    I don’t have an example url, but I can try and remember the CSS I had working…

    basically instead of having the nested ul hidden, you use a CSS image replacement technique (http://www.mezzoblue.com/tests/revised-image-replacement/)

    example:

    #nav li ul {
        position: absolute;
        top: 0px;
        right: 0px;
        text-indent: -2000px;
        width: 10px;
        height: 100%;
        background: url(arrow.gif) no-repeat center right;
    }
    /* You also need to hide the nested li’s for safety */
    #nav li ul li {
        display: none;
    }

    Then declare the hover state:

    #nav li:hover ul {
        display: block;
        position: absolute;
        top: 0px;
        left:  140px;
    }
    /* Unhide the li’s */
    #nav li:hover ul li {
        display: block;
    }

    That’s just the general gist of it…  Little subnav arrows without the hassle of having to touch the mark-up.  I can’t remember what happend with my little Proof of Concept example, but I do know that it worked quite nicely in Firefox, but can’t vouch for the other browsers.  If you really want me to, I can recreate it…  Any other questions, fire away.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Ah: you hide the <li>s when the arrow is showing! I get you now, Nate.

    A few things keep me from putting theory into practice, though. (Foremost being that this whole dropdown technique fails in Netscape 6.) But also, the arrows would disappear as soon as you roll over.  And if the text in any of your <li>s wraps around, the vertical alignment of the arrows is all over the place.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    In reviewing the JavaScript code it occurred to me that for every UL menu there was a parent LI for an actuator and I came up with this streamlined code. The improvement above is good, but it ignores that the idea was to use the accessible structure of the nested lists. In other words, it goes further than necessary with the tag parameter. However, I do like the addition of the hoverClass parameter.

    startList = function() {
    if (document.all&&document;.getElementById) {
      var menus = document.getElementById(“nav”).getElementsByTagName(“ul”);
      for (i = 0; menus; i++) {
      menus[removed].onmouseover = function() {
      this.className += ” over”;
      }
      menus[removed].onmouseout = function() {
      this.className = this.className.replace(” over”, “”);
      }

      }
    }
    }
    window.onload=startList;

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I am including 2 external javascript files.  One is your drop_down.js file and the other is to run the countdown clock.  Only one of them works at a time.  I cannot figure out how to get both of them to work together.  Any thoughts.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Hi, I don’t know if this is my fault or not, but when I tried to validate the JS code..I get many erors (sixs errors)…I don’t know how to fix them…any help :)

    and beside, when I declared my homepage to an XHTML 1.0 trans…the menu that I had put, isn’t working right, see it for your self to understand… :)

    http://w1.409.telia.com/~u40934249/fall.html

    and thnx for the code of the menu, really helped me, I am newb at CSS and the internet, but it really gave me a new way to look at weddevelopment, my past few homepages, was made in tables, so I had the old method to think…and I thnk you for this help :)

    thnx =)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I slightly altered the above script to accommodate some images as well. Works as planned in all browsers with the exception of IE for the Mac. Any ideas? Any input would be much appreciated.

    http://home.comcast.net/~afletch/menu/template.htm

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I slightly altered the above script to accommodate some images as well. Works as planned in all browsers with the exception of IE for the Mac. Any ideas? Any input would be much appreciated.

    http://home.comcast.net/~afletch/menu/template.htm

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    http://www.alistapart.com/d/horizdropdowns/horizontal2.htm
    works perfectly in IE6 and Mozilla
    but when I save the file to my HDD, it stops working in Mozilla.. I get the top-level in 2 rows -> Row 1 is Home & About; row 2 is Services and Contact Us. The drop-down works but the links appear far away.

    It works in Mozilla if you remove the FLOAT:LEFT; from
    HTML UL LI {}
    But that gives a 1px height increase in IE.

    Any work-around???

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    All is beautiful, with the help of this, I’ve just killed 60kb off my nav (yes it was that bad and it was tables). However, its on a site with a LOT of images and they all obviously need to load before it starts working. Is there a way to avoid the onload and still get it to work?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Cudos to Nick Rigby on a lovely tutorial.  Lovely!  Now a question for you all:

    By sliding the menu into a div {position: fixed;} I have successfully nailed my navigation to a certain corner of the screen.  Sadly IE does not support fixed positioning, as you well know.

    To absolve the problem I have implemented the following (common) solution: body {overflow: hidden;} div.content {height: 100%; overflow: auto;} —Effectively leaving absolutely-positioned elements (so long as they are rendered outside the content div) ‘fixed’ to the screen.

    Now for the trauma!  I’ll bet you can guess what’s coming.  When the menu is rendered outside <div class=“content”> in this fashion, the li ul {position: absolute; is treated as follows: li ul {position: fixed;} . . .effectively destroying the menu.

    I do hope there is a brain out there that is capable of concocting some sweet solution to my dilemma, because It certainly isn’t mine.  ~fin

    Why can’t all browers be Safari and Firefox?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    HI
    I see this was recently asked…anyone tried it—having 2 levels of sub menues…??
    And if so how did you do it?
    Thanks
    Suzanne

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Is it possible to have another submenu a level deeper?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Hmmm, I just realised the person before me posted the same request. On a side note, I think it would be good to create a different way to organise comments so they follow-up. Maybe in the next version?

    Thanks for sharing all the knowledge.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  • {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I would like to limit the “ul”, “li” and other tags, including “hmtl”, etc to just the navigation. How to achieve it?

    I can’t use div or class tags individually to every list item because it is created dymically. I only have one enclosing “ul” tag to work with. ie: <ul><?php wp_list_cats(); ?></ul>

    The PHP between the “ul” tags will generate list items enclosed with <li> tags

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.