Stylesheets - Menu is not overlapping content area and width of menu is not accomodating width of its

Author

Menu is not overlapping content area and width of menu is not accomodating width of its

Terry

2007-10-14, 10:15 pm

Hi again folks.

I have a couple of issues now.

I am not sure why I can't get my menu to overlap the content area. I
tried using z-index. The effect I want occurs in Firefox but not IE.

The other issue that I am having is that my drop down menu's width
does not accomodate for the width of the content within the menu. (I
am getting two lines for a menu entry when I just want one)

The url to the page is http://theamazing.onlinewebshop.net/cakes/

Thanks in advance,
Terry

John Hosking

2007-10-14, 10:15 pm

Terry wrote:
> Hi again folks.
>
> I have a couple of issues now.

Hi again yourself. I'm really tired, so I probably shouldn't be posting,
but if you're game I am.

>
> I am not sure why I can't get my menu to overlap the content area. I
> tried using z-index. The effect I want occurs in Firefox but not IE.

Validate your CSS: http://jigsaw.w3.org/css-validator/ (although you
know, it seems like I just told you that recently, like yesterday).

I'm not sure what you mean by content area. I guess you mean the mostly
empty div#contentcontainer.

Trying to use absolute positioning and z-index is often a sign of trying
too hard to do the wrong thing. Anyway, I believe your z-index won't
apply where you've got position:relative.

But this may well not be a CSS question at all, since your menu doesn't
"drop down" at all without JS turned on. (Which raises the problem of
how people without JS will navigate to pages in the drop-down links.)

But there's an error in your JS, namely:
Error: EventCache is not defined
Source File: http://theamazing.onlinewebshop.net/cakes/js.js
Line: 142

Also, your event-cache.js contains just three lines of acual script, if
you count the closing brace at the end as the third line. The rest of
the file is mostly markup (for something). See my "simplicity" comments
below.

Your markup includes a <div id="containerfx">, which contains further
nested divs. The applicable CSS seems to be merely:
#containerfx { width: auto; height: auto; }
which I believe to be the defaults anyway. I'll bet you can remove the
div and rule from the markup and CSS respectively.

Which brings me to the topic of simplicity and maintainability. Wouldn't
you be clearer on what's going on if, e.g., you didn't have declarations
for body set in three different rules? (BTW, line-height: 1px; is pretty
silly.) And get rid of all the commented-out stuff. Keep a copy of the
style.css file if you insist, but for your working file (and especially,
for the one you're posting for others to analyze and help debug), get
rid of all extraneous stuff.

After you've declared zero margin and padding for every HTML element you
can think of in the first rule, you hack desperately and superstitiously
with stuff like

ul.slidingmenu,
ul.slidingmenu ul,
ul.slidingmenu li,
ul.slidingmenu a {
padding: 0;
margin: 0;
display: inline; }

and

ul.slidingmenu li {
list-style-type: none;
position: relative;
padding-left:0; padding-right:0;
margin-left:0; margin-right:0; }

and several other variations of ul.slidingmenu selectors. Stop it.
Either get rid of all the CSS and only add the rules you understand and
can show that you need, or go shopping for ready-made menus on the 'Net,
like at Listamatic <http://css.maxdesign.com.au/listamatic/index.htm> (I
also recommend their Selectutorial pages). Or if you insist on using JS,
search for "suckerfish" or "son of suckerfish", to find e.g.
<http://www.htmldog.com/articles/suckerfish/dropdowns/>

>
> The other issue that I am having is that my drop down menu's width
> does not accomodate for the width of the content within the menu. (I
> am getting two lines for a menu entry when I just want one)

See my comments above.

In any case, I'm too tired and you've got too many rules for me to tell
what width restriction(s) might be applying here. Maybe if you add
padding:.5em; to the ul.slidingmenu li ul li rule, but then again, maybe
that's not the best or even a useful solution. Maybe you just need
in your multi-word list items.

>
> The url to the page is http://theamazing.onlinewebshop.net/cakes/

Yeah, yeah, we've heard *that* before. ;-)
ZZZzzz

--
John
You might get more help with a real newsreader and real newsserver.
The UIP: http://improve-usenet.org/

Terry

2007-10-15, 3:16 am

On Oct 14, 10:12 pm, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
> Terry wrote:
>
>
> Hi again yourself. I'm really tired, so I probably shouldn't be posting,
> but if you're game I am.
>
>
>
>
> Validate your CSS:http://jigsaw.w3.org/css-validator/ (although you
> know, it seems like I just told you that recently, like yesterday).
>
> I'm not sure what you mean by content area. I guess you mean the mostly
> empty div#contentcontainer.
>
> Trying to use absolute positioning and z-index is often a sign of trying
> too hard to do the wrong thing. Anyway, I believe your z-index won't
> apply where you've got position:relative.
>
> But this may well not be a CSS question at all, since your menu doesn't
> "drop down" at all without JS turned on. (Which raises the problem of
> how people without JS will navigate to pages in the drop-down links.)
>
> But there's an error in your JS, namely:
> Error: EventCache is not defined
> Source File:http://theamazing.onlinewebshop.net/cakes/js.js
> Line: 142
>
> Also, your event-cache.js contains just three lines of acual script, if
> you count the closing brace at the end as the third line. The rest of
> the file is mostly markup (for something). See my "simplicity" comments
> below.
>
> Your markup includes a <div id="containerfx">, which contains further
> nested divs. The applicable CSS seems to be merely:
> #containerfx { width: auto; height: auto; }
> which I believe to be the defaults anyway. I'll bet you can remove the
> div and rule from the markup and CSS respectively.
>
> Which brings me to the topic of simplicity and maintainability. Wouldn't
> you be clearer on what's going on if, e.g., you didn't have declarations
> for body set in three different rules? (BTW, line-height: 1px; is pretty
> silly.) And get rid of all the commented-out stuff. Keep a copy of the
> style.css file if you insist, but for your working file (and especially,
> for the one you're posting for others to analyze and help debug), get
> rid of all extraneous stuff.
>
> After you've declared zero margin and padding for every HTML element you
> can think of in the first rule, you hack desperately and superstitiously
> with stuff like
>
> ul.slidingmenu,
> ul.slidingmenu ul,
> ul.slidingmenu li,
> ul.slidingmenu a {
> padding: 0;
> margin: 0;
> display: inline; }
>
> and
>
> ul.slidingmenu li {
> list-style-type: none;
> position: relative;
> padding-left:0; padding-right:0;
> margin-left:0; margin-right:0; }
>
> and several other variations of ul.slidingmenu selectors. Stop it.
> Either get rid of all the CSS and only add the rules you understand and
> can show that you need, or go shopping for ready-made menus on the 'Net,
> like at Listamatic <http://css.maxdesign.com.au/listamatic/index.htm> (I
> also recommend their Selectutorial pages). Or if you insist on using JS,
> search for "suckerfish" or "son of suckerfish", to find e.g.
> <http://www.htmldog.com/articles/suckerfish/dropdowns/>
>
>
>
>
> See my comments above.
>
> In any case, I'm too tired and you've got too many rules for me to tell
> what width restriction(s) might be applying here. Maybe if you add
> padding:.5em; to the ul.slidingmenu li ul li rule, but then again, maybe
> that's not the best or even a useful solution. Maybe you just need
> in your multi-word list items.
>
>
>
>
> Yeah, yeah, we've heard *that* before. ;-)
> ZZZzzz
>
> --
> John
> You might get more help with a real newsreader and real newsserver.
> The UIP:http://improve-usenet.org/

Thanks for getting back to me John.

I did not mean to bother you.

I did try to validate my css and noticed the errors but did not know
how to handle so I decided that I would try to do so later.

The menu that I am trying to use is one that I adapted from one that
appeared in a book (DHTML Utopia). It stated that the menu would
degrade gracefully in the case that javascript was disabled.

I will make a much better attempt to clean up my css.

I was wondering if you think that it might not be working based on
those clipping values that are used in the javascript.

Thanks,
Terry

dorayme

2007-10-15, 3:16 am

In article
<1192415553.988710.123420@k35g2000prh.googlegroups.com>,
Terry <wdd@rogers.com> wrote:

> Thanks for getting back to me John.
>
> I did not mean to bother you.
>
> I did try to validate my css and noticed the errors but did not know
> how to handle so I decided that I would try to do so later.
>
> The menu that I am trying to use is one that I adapted from one that
> appeared in a book (DHTML Utopia). It stated that the menu would
> degrade gracefully in the case that javascript was disabled.

What is it that attracts you to such a thing for your site? Why
do people particularly need to see the dropdown details. They
work badly even with 'javascript on' on my machine, slow and
clunky and somehow only intermittently?)

If users are interested in looking further, they will. You can
interest them in what you do outside of menu items on the page
itself. By using describing the various things they can go to,
you can provide links in context.

Why all the convoluted mark up and css for such a basically
regular and straightforward site? Have you not enough to do
making cakes? Forget about relative positioning and z-indexing
and sliding this or that, leave behind all that stuff about text
popping up and obscuring other boxes with text, with menus
growing em style and bursting all over the whole design (have you
seen what happens when you alt shift + or alt + or whatever you
do in Windows to enlarge text in FF (on a Mac it is command +)?

I think you better contact Farmer Joe here in Australia. He
thinks website making is like baking cakes and he would not be
pleased if you were to try to bake a simple cake in some overly
complicated way.

--
dorayme

Terry

2007-10-15, 3:16 am

On Oct 14, 10:50 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <1192415553.988710.123...@k35g2000prh.googlegroups.com>,
>
> Terry <w...@rogers.com> wrote:
>
>
>
>
> What is it that attracts you to such a thing for your site? Why
> do people particularly need to see the dropdown details. They
> work badly even with 'javascript on' on my machine, slow and
> clunky and somehow only intermittently?)

The client that I am creating the site for saw a menu on another site
and wanted it on hers so I was trying to oblige.

> If users are interested in looking further, they will. You can
> interest them in what you do outside of menu items on the page
> itself. By using describing the various things they can go to,
> you can provide links in context.
>
> Why all the convoluted mark up and css for such a basically
> regular and straightforward site? Have you not enough to do
> making cakes? Forget about relative positioning and z-indexing
> and sliding this or that, leave behind all that stuff about text
> popping up and obscuring other boxes with text, with menus
> growing em style and bursting all over the whole design (have you
> seen what happens when you alt shift + or alt + or whatever you
> do in Windows to enlarge text in FF (on a Mac it is command +)?
>
No I have not seen what would happen if the text was enlarged.
Perhaps I should look into that.

> I think you better contact Farmer Joe here in Australia. He
> thinks website making is like baking cakes and he would not be
> pleased if you were to try to bake a simple cake in some overly
> complicated way.

Like I posted earlier I will try to clean up my css.

Thanks,
Terry

dorayme

2007-10-15, 3:16 am

In article
<1192417366.297659.34710@e9g2000prf.googlegroups.com>,
Terry <wdd@rogers.com> wrote:

> On Oct 14, 10:50 pm, dorayme
[color=darkred]
>
>
> The client that I am creating the site for saw a menu on another site
> and wanted it on hers so I was trying to oblige.
>

Well, then, are you giving us a url where you have isolated a
problem? Look, perhaps it will help you to say, start again with
this for you html (or something very close and unfancy):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Company Web Sites</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="header">
<img src="images/header.jpg" alt="It's a Sweet Thing"
width="359" height="101">
</div>
<ul class="slidingmenu">
<li><a href="home.htm">Home</a></li>
<li>
<a href="about.htm">About</a>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">Sweet Beginnings</a></li>
<li><a href="#">Client Testimonials</a></li>
</ul>
</li>
<li>
<a href="weddingcakes.htm">Wedding Cakes</a>
<ul>
<li><a href="#">Wedding Cakes I</a></li>
<li><a href="#">Wedding Cakes II</a></li>
<li><a href="#">Groom's Cakes</a></li>
<li><a href="#">Cupcake Cakes</a></li>
</ul>
</li>
<li><a href="celebrationcakes.htm">Celebration
Cakes</a></li>
<li><a href="ordering.htm">Ordering/Contact</a></li>
<li><a href="faq.htm">Faq</a></li>
</ul>
<div id="contentcontainer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
nec orci quis nulla egestas fermentum.Ut quis eros. Aenean at
augue vitae quam posuere vehicula. Pellentesque habitantmorbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Maecenas justonunc, porta sed, molestie eget, adipiscing id,
ante. Cum sociis natoque penatibus etmagnis dis parturient
montes, nascetur ridiculus mus. Suspendisse potenti. Nunc
blanditmagna id odio sodales luctus. Nulla quam magna, viverra
quis, dignissim blandit, viverra nec, odio.
</div>
</body>
</html>

And get rid of almost all of your css (frankly, it is impossible
to understand, line-height: 1px????? font-family: inherit at the
body? Honestly, you cannot "fix it" or "clean it up".

Start with

body {
margin: 0;
padding: 0;
color: #333;
background-color: #cfc;
}

#header {

width: 375px;
margin: auto;
}

And now go and look at drop down menus. Look at CSS ones that
need no javascript if your client insists on such a thing. and
style very carefully, if you are going to start putting in things
you don't understand, you will simply get into a mess.

> No I have not seen what would happen if the text was enlarged.
> Perhaps I should look into that.
>
>
> Like I posted earlier I will try to clean up my css.
>
> Thanks,
> Terry

--
dorayme

Ben C

2007-10-15, 3:16 am

On 2007-10-15, John Hosking <John@DELETE.Hosking.name.INVALID> wrote:
[...]
> Anyway, I believe your z-index won't apply where you've got
> position:relative.

It should do, but there's no accounting for IE. Position: anything
except static should work with z-index.

I notice the OP uses "z-index: 1100". The actual value used for z-index
is a good indication of the author's frustration. Usually 1 will do, or
perhaps a range from -2 to 2 for a document with a lot of unusual
stacking.

Ben C

2007-10-15, 6:15 am

On 2007-10-15, Terry <wdd@rogers.com> wrote:

[re http://theamazing.onlinewebshop.net/cakes/]
> The other issue that I am having is that my drop down menu's width
> does not accomodate for the width of the content within the menu. (I
> am getting two lines for a menu entry when I just want one)

You're relying on a very tricky (and rather absurd) part of the
specification there: inline containing blocks.

I've not found any browser that gets those quite right. See
http://www.tidraso.co.uk/misc/inline-cb.html.

The question in this case is how wide are those inline containing
blocks, since they determine the available width for the popups. They
should be only the width of their contents, so if "Wedding Cakes I" is
wider than "Wedding Cakes", which it is, the box gets its available
width and the line is broken between "Cakes" and "I".

You could add white-space: nowrap to the styles for the <ul>, but that
probably won't work in IE. Or I suppose use instead of " " for
the spaces in the menu text.

You might be better to make the menu headings float: left rather than
display: inline. It won't be so easy to get them centered if you do but
you might have fewer problems with stacking and positioning.

I'm not sure you need that z-index in theory even in Firefox (although
it gets it wrong if you don't), although I may not have looked closely
enough at what's going on.

Terry

2007-10-15, 6:15 am

On Oct 15, 3:30 am, Ben C <spams...@spam.eggs> wrote:
> On 2007-10-15, Terry <w...@rogers.com> wrote:
>
> [rehttp://theamazing.onlinewebshop.net/cakes/]
>
>
> You're relying on a very tricky (and rather absurd) part of the
> specification there: inline containing blocks.
>
> I've not found any browser that gets those quite right. Seehttp://www.tidraso.co.uk/misc/inline-cb.html.
>
> The question in this case is how wide are those inline containing
> blocks, since they determine the available width for the popups. They
> should be only the width of their contents, so if "Wedding Cakes I" is
> wider than "Wedding Cakes", which it is, the box gets its available
> width and the line is broken between "Cakes" and "I".
>
> You could add white-space: nowrap to the styles for the <ul>, but that
> probably won't work in IE. Or I suppose use instead of " " for
> the spaces in the menu text.
>
> You might be better to make the menu headings float: left rather than
> display: inline. It won't be so easy to get them centered if you do but
> you might have fewer problems with stacking and positioning.
>
> I'm not sure you need that z-index in theory even in Firefox (although
> it gets it wrong if you don't), although I may not have looked closely
> enough at what's going on.

Thanks for the suggestions Ben. I am going to look into things
further.
I did do what the previous poster, dorayme, suggested, and looked at
the menus from
suckerfish. I came across one that looks simple enough.

It is http://www.htmldog.com/articles/suckerfish/bones/

It seems to work properly with Firefox and IE. But not IE7. In IE7
the menu is starting at the right of the calling menu item as opposed
to underneath it as it does in the other browsers.

Do you know off hand would have to be done to get it to work with IE?
I was thinking of perhaps a hack that detects for IE7 and then uses
the same style stuff that is being used for non IE browsers.

Thanks,
Terry

Ben C

2007-10-15, 6:16 pm

On 2007-10-15, Terry <wdd@rogers.com> wrote:
> On Oct 15, 3:30 am, Ben C <spams...@spam.eggs> wrote:
[...][color=darkred]
[...][color=darkred]
> I did do what the previous poster, dorayme, suggested, and looked at
> the menus from suckerfish.

Good idea.

> I came across one that looks simple enough.
>
> It is http://www.htmldog.com/articles/suckerfish/bones/

That is using floats instead of inlines for the containers.

> It seems to work properly with Firefox and IE. But not IE7. In IE7
> the menu is starting at the right of the calling menu item as opposed
> to underneath it as it does in the other browsers.
>
> Do you know off hand would have to be done to get it to work with IE?

I can only guess as I don't have IE, but I notice that the popup <ul>s
are position: absolute; left: auto; top: auto.

Making left and top auto for absolutely positioned elements is asking
for trouble. It leads you to a part of the spec that says the browser is
"free to make a guess" at the box's position (CSS 2.1 10.3.7).

Not that IE usually waits to be asked before making a guess at a box's
position.

You could try changing those to left: 0; top; 1em. So long as your menu
items are all on one line, it should be OK.

Otherwise you can put a little wrapper in so you have something like
this:

<li>
Sunfishes
<div style="position: relative">
<ul style="position: absolute; top: 0; left: 0;">
...
</div>

The <div> there locates the popup <ul> underneath the text at the start
of the <li>. It's a more explicit way of doing what top: auto is
supposed to do anyway.

left: auto in this example is just silly-- it should compute to left:0
anyway.

> I was thinking of perhaps a hack that detects for IE7 and then uses
> the same style stuff that is being used for non IE browsers.

Hopefully that won't be necessary and you can find something that works
in both.

Terry

2007-10-15, 6:16 pm

On Oct 15, 8:37 am, Ben C <spams...@spam.eggs> wrote:
> On 2007-10-15, Terry <w...@rogers.com> wrote:
>
>
> [...]
> [...]
>
> Good idea.
>
>
>
> That is using floats instead of inlines for the containers.
>
>
>
> I can only guess as I don't have IE, but I notice that the popup <ul>s
> are position: absolute; left: auto; top: auto.
>
> Making left and top auto for absolutely positioned elements is asking
> for trouble. It leads you to a part of the spec that says the browser is
> "free to make a guess" at the box's position (CSS 2.1 10.3.7).
>
> Not that IE usually waits to be asked before making a guess at a box's
> position.
>
> You could try changing those to left: 0; top; 1em. So long as your menu
> items are all on one line, it should be OK.
>
> Otherwise you can put a little wrapper in so you have something like
> this:
>
> <li>
> Sunfishes
> <div style="position: relative">
> <ul style="position: absolute; top: 0; left: 0;">
> ...
> </div>
>
> The <div> there locates the popup <ul> underneath the text at the start
> of the <li>. It's a more explicit way of doing what top: auto is
> supposed to do anyway.
>
> left: auto in this example is just silly-- it should compute to left:0
> anyway.
>
>
> Hopefully that won't be necessary and you can find something that works
> in both.

Thanks for the suggestions. I will look into things further.

By the way are you aware of any free newsgroup clients I am getting a
little tired of using google groups.

Terry

Ben C

2007-10-15, 6:16 pm

On 2007-10-15, Terry <wdd@rogers.com> wrote:
[...]
> By the way are you aware of any free newsgroup clients I am getting a
> little tired of using google groups.

Do you mean for Windows? I think you can use Thunderbird-- it does news
as well as email.

dorayme

2007-10-15, 10:15 pm

In article
<1192442130.703346.158950@e9g2000prf.googlegroups.com>,
Terry <wdd@rogers.com> wrote:

> On Oct 15, 3:30 am, Ben C <spams...@spam.eggs> wrote:
>
> Thanks for the suggestions Ben. I am going to look into things
> further.
> I did do what the previous poster, dorayme, suggested, and looked at
> the menus from
> suckerfish. I came across one that looks simple enough.
>
> It is http://www.htmldog.com/articles/suckerfish/bones/
>
> It seems to work properly with Firefox and IE. But not IE7. In IE7
> the menu is starting at the right of the calling menu item as opposed
> to underneath it as it does in the other browsers.
>
> Do you know off hand would have to be done to get it to work with IE?
> I was thinking of perhaps a hack that detects for IE7 and then uses
> the same style stuff that is being used for non IE browsers.
>

I have put up at

<http://netweaver.com.au/dropdownMenus/dropdown.html>

an example of a dropdown menu. It may help you to see how to do
it. The javascript is just for IE.

It is a styled and slightly varied adaptation from a link similar
to your above. There is a link on it to an idea for the submenus
to appear horizontally and this works fine in circumscribed
contexts. I have not yet begun to think how to adapt this second
idea to show itself properly in Internet Explorer. It needs
someone handier with javascript...

Just one thing more, to make things look nicer in IE, one needs
to use slightly different styling for the top margin of the
content, perhaps one or two other things. Like everyoe else in
this game, I am pissed off with IE and do as little as i can for
it, but am forced - as is any hostage.

--
dorayme

dorayme

2007-10-15, 10:15 pm

In article
<doraymeRidThis-9FF58C.09561716102007@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:

>
> I have put up at
>
> <http://netweaver.com.au/dropdownMenus/dropdown.html>
>
> an example of a dropdown menu. It may help you to see how to do
> it. The javascript is just for IE.
>
> It is a styled and slightly varied adaptation from a link similar
> to your above. There is a link on it to an idea for the submenus
> to appear horizontally and this works fine in circumscribed
> contexts. I have not yet begun to think how to adapt this second
> idea to show itself properly in Internet Explorer. It needs
> someone handier with javascript...
>
> Just one thing more, to make things look nicer in IE, one needs
> to use slightly different styling for the top margin of the
> content, perhaps one or two other things. Like everyoe else in
> this game, I am pissed off with IE and do as little as i can for
> it, but am forced - as is any hostage.

Since realised that it is not the javascript that needs to be
altered for IE but the css needs adding to, specifically that

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

needs adding to and styling. Well, at least it worked when I
tried it on IE 6 after adding a bit of styling to the the css,
mainly by giving a generous width so that the sub-menu items do
not wrap. Anyway, OP can play about.

I have since updated the above link to reflect this.

[I knew there were reasons that dropdown menus piss me off! In
addition, with a drop down menu system you buy a whole lot more
thinking to do. What to make the non-sub items go to? You
probably need to duplicate or backup the sub-items on the page
the main item goes to. In all of this, you need not to confuse
folks. If an author goes for drop downs, I suspect they thereby
become *less careful* in how to name the links, how to ration
them down to simple necessities...thethinking maybe going "well,
they can see what this link means because there are all the sub
items to give it sense")

--
dorayme

David Mark

2007-10-16, 6:15 am

On Oct 15, 9:28 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <doraymeRidThis-9FF58C.09561716102...@news-vip.optusnet.com.au>,
>
>
>
>
>
> dorayme <doraymeRidT...@optusnet.com.au> wrote:
>
>
>
>

I recently threw this together as I got tired of hearing questions
about bad menu scripts in clj.

http://code.google.com/p/nicemenus/
[color=darkred]
>

Styling nested lists is a major pain in IE.
[color=darkred]
>
> Since realised that it is not the javascript that needs to be
> altered for IE but the css needs adding to, specifically that
>
> #nav li:hover ul, #nav li.sfhover ul
>
> needs adding to and styling. Well, at least it worked when I
> tried it on IE 6 after adding a bit of styling to the the css,
> mainly by giving a generous width so that the sub-menu items do
> not wrap. Anyway, OP can play about.

You can use a white-space rule to stop the list items from wrapping.

>
> I have since updated the above link to reflect this.
>
> [I knew there were reasons that dropdown menus piss me off! In
> addition, with a drop down menu system you buy a whole lot more
> thinking to do. What to make the non-sub items go to? You

There is no reason they have to be links.

> probably need to duplicate or backup the sub-items on the page
> the main item goes to. In all of this, you need not to confuse
> folks. If an author goes for drop downs, I suspect they thereby
> become *less careful* in how to name the links, how to ration
> them down to simple necessities...thethinking maybe going "well,
> they can see what this link means because there are all the sub
> items to give it sense")

I don't like cascading menus for navigation either. I can't imagine
that users prefer them. There are almost always accessibility issues
with canned menu scripts (and always with CSS-only versions.) The
hierarchy for a site should be rendered as a tree IMO. Cascading
menus are tree-like, but you can only view one branch at a time. I
find that very annoying.