423,850 Members | 1,253 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,850 IT Pros & Developers. It's quick & easy.

css dropdown menus

P: n/a
I have question about the technique for css dropdown menus described in
http://www.alistapart.com/articles/horizdropdowns/. Based on an html list,
it has a few items in a 1st order list and further 2nd order lists that
appear to the right when hovering over items in the 1st order.

Anyone figured how to modify to go to n order greater than 2? Bit tricky I
found. I could get the other orders but they all appeared when hovering over
the 1st order whereas what is needed is for the 2nd order item concerned to
be hovered over specifically before the 3rd order list appears yet even
further to the right...

chart43
Jul 20 '05 #1
Share this Question
Share on Google+
19 Replies


P: n/a
chart43 wrote:
I have question about the technique for css dropdown menus described in
http://www.alistapart.com/articles/horizdropdowns/. Based on an html list,
it has a few items in a 1st order list and further 2nd order lists that
appear to the right when hovering over items in the 1st order.

Anyone figured how to modify to go to n order greater than 2? Bit tricky I
found. I could get the other orders but they all appeared when hovering over
the 1st order whereas what is needed is for the 2nd order item concerned to
be hovered over specifically before the 3rd order list appears yet even
further to the right...


I use three levels of menus on my site <http://matt.blissett.me.uk/>

The CSS isn't tidy though, I'm going to make a simple version with just
the menus. But maybe it will help :-)

Oh, I don't use the javascript thing to make it work in IE, IE gets an
extra stylesheet. The javascript can be added easily if required.

HTH

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #2

P: n/a
> chart43 wrote:
I have question about the technique for css dropdown menus described in
http://www.alistapart.com/articles/horizdropdowns/. Based on an html list,
it has a few items in a 1st order list and further 2nd order lists that
appear to the right when hovering over items in the 1st order.

Anyone figured how to modify to go to n order greater than 2? Bit tricky I
found. I could get the other orders but they all appeared when hovering over
the 1st order whereas what is needed is for the 2nd order item concerned to
be hovered over specifically before the 3rd order list appears yet even
further to the right...


I use three levels of menus on my site <http://matt.blissett.me.uk/>

The CSS isn't tidy though, I'm going to make a simple version with just
the menus. But maybe it will help :-)

Oh, I don't use the javascript thing to make it work in IE, IE gets an
extra stylesheet. The javascript can be added easily if required.

HTH

--
Matt

Thanks for this Matt, will take a closer look soon at code. I did notice it
does not work in IE (personally I want my sites to as so many folk use this
browser and even version 5). I noticed in my Mozilla it works much as you
intend though I also notice that your attention to "title" in your html code
results in the same appearing over the menu items and obscuring them (and,
unlike in IE, the title mouse over pop-up in my Mozilla are not temporary)

Jul 20 '05 #3

P: n/a
chart43 wrote:
[matt]
chart43 wrote:
I have question about the technique for css dropdown menus
described in http://www.alistapart.com/articles/horizdropdowns/.
...

I use three levels of menus on my site <http://matt.blissett.me.uk/>


Thanks for this Matt, will take a closer look soon at code. I did
notice it does not work in IE ...


On the contrary - ISTM that IE users get a useful/usable menu system on
Matt's site, which is more than can be said for many other dropdowns.

--
William Tasso
Jul 20 '05 #4

P: n/a
William Tasso wrote:
chart43 wrote:
[matt]
chart43 wrote:

I have question about the technique for css dropdown menus
described in http://www.alistapart.com/articles/horizdropdowns/.
...
I use three levels of menus on my site <http://matt.blissett.me.uk/>


Thanks for this Matt, will take a closer look soon at code. I did
notice it does not work in IE ...


On the contrary - ISTM that IE users get a useful/usable menu system on
Matt's site, which is more than can be said for many other dropdowns.


Yes, I have seen (and used) the javascript from the alistapart site, but I
chose to use a different stylesheet for IE to avoid the whole issue. You
will see:

<link rel="stylesheet" href="{snip}/best.css" {snip}>
<!--[if IE]><link rel="stylesheet" href="{snip}/ie_only.css" {snip}><![endif]-->

The second stylesheet, only used by IE, overrides the opening menus (and a
few other 'bugs').

I intend to write a concise sample page at some point.

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #5

P: n/a
On Sun, 11 Jul 2004 11:01:21 +1000, chart43 <ch*****@optusnet.com.au>
wrote:

Thanks for this Matt, will take a closer look soon at code. I did notice
it
does not work in IE (personally I want my sites to as so many folk use
this
browser and even version 5). I noticed in my Mozilla it works much as you
intend though I also notice that your attention to "title" in your html
code
results in the same appearing over the menu items and obscuring them
(and,
unlike in IE, the title mouse over pop-up in my Mozilla are not
temporary)


Mozilla works fine. Opera 7.23, nothing. No expansion, no dropdowns.
Jul 20 '05 #6

P: n/a
Neal wrote:
On Sun, 11 Jul 2004 11:01:21 +1000, chart43 <ch*****@optusnet.com.au>
wrote:

Thanks for this Matt, will take a closer look soon at code. I did
notice it
does not work in IE (personally I want my sites to as so many folk use
this
browser and even version 5). I noticed in my Mozilla it works much as you
intend though I also notice that your attention to "title" in your
html code
results in the same appearing over the menu items and obscuring them
(and,
unlike in IE, the title mouse over pop-up in my Mozilla are not
temporary)

Mozilla works fine. Opera 7.23, nothing. No expansion, no dropdowns.


Install Opera with JRE or install the latest version of Opera 7.51 with JRE.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Under construction
Jul 20 '05 #7

P: n/a
On Sun, 11 Jul 2004 18:37:34 +0200, Edwin van der Vaart
<pi************@yahoo.co.uk> wrote:
Neal wrote:
On Sun, 11 Jul 2004 11:01:21 +1000, chart43 <ch*****@optusnet.com.au>
wrote:

Thanks for this Matt, will take a closer look soon at code. I did
notice it
does not work in IE (personally I want my sites to as so many folk use
this
browser and even version 5). I noticed in my Mozilla it works much as
you
intend though I also notice that your attention to "title" in your
html code
results in the same appearing over the menu items and obscuring them
(and,
unlike in IE, the title mouse over pop-up in my Mozilla are not
temporary)

Mozilla works fine. Opera 7.23, nothing. No expansion, no dropdowns.


Install Opera with JRE or install the latest version of Opera 7.51 with
JRE.


Right. You're not going to put that on the webpage though ;)
Jul 20 '05 #8

P: n/a
Edwin van der Vaart wrote:
Neal wrote:
On Sun, 11 Jul 2004 11:01:21 +1000, chart43 <ch*****@optusnet.com.au>
wrote:

Thanks for this Matt, will take a closer look soon at code. I did
notice it does not work in IE (personally I want my sites to as so
many folk use this browser and even version 5).
Hmmm... I must have changed something. I'll have a look, I though it
worked in IE too :-S
I noticed in my Mozilla it works much as you intend though I also
notice that your attention to "title" in your html code results in the
same appearing over the menu items and obscuring them (and, unlike in
IE, the title mouse over pop-up in my Mozilla are not temporary)

How odd, the tooltips don't always disappear. I'm not sure how useful
those title="" bits are, I might rethink that.

The display error is caused by the :after { content... } on the links, the
right-floated < symbol, removing it corrects Mozilla's issue.
Mozilla works fine. Opera 7.23, nothing. No expansion, no dropdowns.

I'll fix that then
Install Opera with JRE or install the latest version of Opera 7.51 with
JRE.


Please, 7.52 ;-). And Java isn't required. Though, I shall make it work in
7.23 anyway.

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #9

P: n/a
Matt wrote:
Edwin van der Vaart wrote:

Install Opera with JRE or install the latest version of Opera 7.51 with
JRE.


Please, 7.52 ;-).


That's fast. About 3 weeks ago 7.51 was released.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Under construction
Jul 20 '05 #10

P: n/a
Neal wrote:
On Sun, 11 Jul 2004 18:37:34 +0200, Edwin van der Vaart
<pi************@yahoo.co.uk> wrote:
Neal wrote:
On Sun, 11 Jul 2004 11:01:21 +1000, chart43 <ch*****@optusnet.com.au>
wrote:
Thanks for this Matt, will take a closer look soon at code. I did
notice it
does not work in IE (personally I want my sites to as so many folk use
this
browser and even version 5). I noticed in my Mozilla it works much as
you
intend though I also notice that your attention to "title" in your
html code
results in the same appearing over the menu items and obscuring them
(and,
unlike in IE, the title mouse over pop-up in my Mozilla are not
temporary)
Mozilla works fine. Opera 7.23, nothing. No expansion, no dropdowns.


Install Opera with JRE or install the latest version of Opera 7.51 with
JRE.


Right. You're not going to put that on the webpage though ;)


For some reason Opera 7.23 doesn't like the position: absolute on the
first level menus, it's fine on the second though (if the first is changed
to static). In any case, I'm redoing the menus, I'm making an N-level
popup menu system, I might put that javascript in, otherwise it will use
an [if IE] stylesheet to put the menu back to a simple list.

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #11

P: n/a
Matt wrote:

<big snip -- CSS menus>
In any case, I'm redoing the menus, I'm making an N-level
popup menu system, I might put that javascript in, otherwise it will use
an [if IE] stylesheet to put the menu back to a simple list.


OK, I made the menus. You can have as many levels as you want, they
have the same, repeating, structure.

The CSS relys on two very simple rules:
#nav > ul, #nav * > ul { visibility: hidden; }
#nav li:hover > ul { visibility: visible; }

(the selectors for the first, to hide from IE 4, I think -- it fixes
something in one IE, anyway).

The rest is positioning and colouring.

I'm going to write a bit more on the page, but the sample menus are done:
<http://matt.blissett.me.uk/web/authoring/css_menus/sample>

I tried to make it degrade to a simple listing in IE with the second
stylesheet. It's fine in IE 5, 5.5 and 6, but in IE 4 the second
stylesheet isn't used. How many IE 4 users are there left? It's good in IE
3 also, since it's just a list (better than my old <div> method).

Hope that helps,

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #12

P: n/a
On Sun, 11 Jul 2004 18:24:32 +0100, Matt wrote:
Install Opera with JRE or install the latest
version of Opera 7.51 with JRE.


Please, 7.52 ;-). And Java isn't required.


I should think not! Downloading the 14Meg+
plug-in (1.4, the 1.5 version is pushing 30)
for menus seems insane.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 20 '05 #13

P: n/a
my experience was on a Mac, OS 9, IE 5.1.6
From: "William Tasso" <ne****@tbdata.com>
Organization: <a href=" http://www.WilliamTasso.com/"> William Tasso </a>
Reply-To: "William Tasso" <ne****@tbdata.com>
Newsgroups: comp.infosystems.www.authoring.stylesheets
Date: Sun, 11 Jul 2004 10:28:55 +0100
Subject: Re: css dropdown menus

chart43 wrote:
[matt]
chart43 wrote:

I have question about the technique for css dropdown menus
described in http://www.alistapart.com/articles/horizdropdowns/.
...
I use three levels of menus on my site <http://matt.blissett.me.uk/>


Thanks for this Matt, will take a closer look soon at code. I did
notice it does not work in IE ...


On the contrary - ISTM that IE users get a useful/usable menu system on
Matt's site, which is more than can be said for many other dropdowns.

--
William Tasso


Jul 20 '05 #14

P: n/a
Works really well in Mozilla on my Mac. Just the thing, Matt. No title
popups obscuring this time, well done, have not yet looked at your code. But
does not work at all in IE 5, the mouse does not "hand" and there is no
other sense of it being a link ... Again, on a Mac running OS 9 with IE
5.1.6 (pretty well the latest and last for IE on Macs).

I must remember that here I am swimming in a pool of folk mainly PC, so
maybe you can safely ignore Mac people on less than OS X. But believe me,
some of the most handsome and intelligent folk still use OS 9 and IE. Also
some of the most deserving of God's creatures, can you safely leave them
out? Maybe if you are a young healthy man far from The Big Reckoning Day.

:)

Chart43

From: Matt <no******@spam.matt.blissett.me.uk>
Organization: Newsfeeds.com http://www.newsfeeds.com 100,000+ UNCENSORED
Newsgroups.
Newsgroups: comp.infosystems.www.authoring.stylesheets
Date: Sun, 11 Jul 2004 22:34:45 +0100
Subject: Re: css dropdown menus

Matt wrote:

<big snip -- CSS menus>
In any case, I'm redoing the menus, I'm making an N-level
popup menu system, I might put that javascript in, otherwise it will use
an [if IE] stylesheet to put the menu back to a simple list.


OK, I made the menus. You can have as many levels as you want, they
have the same, repeating, structure.

The CSS relys on two very simple rules:
#nav > ul, #nav * > ul { visibility: hidden; }
#nav li:hover > ul { visibility: visible; }

(the selectors for the first, to hide from IE 4, I think -- it fixes
something in one IE, anyway).

The rest is positioning and colouring.

I'm going to write a bit more on the page, but the sample menus are done:
<http://matt.blissett.me.uk/web/authoring/css_menus/sample>

I tried to make it degrade to a simple listing in IE with the second
stylesheet. It's fine in IE 5, 5.5 and 6, but in IE 4 the second
stylesheet isn't used. How many IE 4 users are there left? It's good in IE
3 also, since it's just a list (better than my old <div> method).

Hope that helps,

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----


Jul 20 '05 #15

P: n/a
Please don't top post.

chart43 wrote:
on a Mac running OS 9 with IE 5.1.6 (pretty well the latest and
last for IE on Macs).
IIRC, there is 5.2, a port for OS X (though not a native app).
I must remember that here I am swimming in a pool of folk mainly
PC, so maybe you can safely ignore Mac people on less than OS X.
But believe me, some of the most handsome and intelligent folk
still use OS 9 and IE.


Whether they're intelligent or handsome, I cannot say. But the
migration to OS X is long from over, so it'd be foolish to make
something that's downright broken in IE/Mac. Fortunately, I have a
sister who is forced to use the old OS 9 at work, Unfortunately, she
does not test my creations as often as I'd like. ;-)

Caution: if you stick around here for too long, you may become more
valuable than you'd like, the lone ciwa* participant who can test
things on the Mac platforms.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #16

P: n/a
Brian wrote:
Please don't top post.

chart43 wrote:
on a Mac running OS 9 with IE 5.1.6 (pretty well the latest and
last for IE on Macs).
IIRC, there is 5.2, a port for OS X (though not a native app).


I see 5.16 and 5.17 in the logs. I'm not sure where to start debugging it,
have you any ideas yourself? Do the menus on <http://matt.blissett.me.uk/>
function in IE for Mac (as they are based on the sample menus)?
I must remember that here I am swimming in a pool of folk mainly
PC,
Fair few linux uses too.
so maybe you can safely ignore Mac people on less than OS X.
But believe me, some of the most handsome and intelligent folk
still use OS 9 and IE.


Whether they're intelligent or handsome, I cannot say. But the
migration to OS X is long from over, so it'd be foolish to make
something that's downright broken in IE/Mac. Fortunately, I have a
sister who is forced to use the old OS 9 at work, Unfortunately, she
does not test my creations as often as I'd like. ;-)


I don't think I know anyone with a Mac I could access. In October I go to
university, if I get to Imperial (with the AAA grades) I can use their
shiny new Mac lab though :-). Does that make me handsome?
Caution: if you stick around here for too long, you may become more
valuable than you'd like, the lone ciwa* participant who can test
things on the Mac platforms.


A long term aim of mine was to get an Acorn Archimedes online, but I
haven't done so yet. Mind you, there are more people using Dillo :)

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #17

P: n/a
> From: Brian <us*****@julietremblay.com.invalid>
chart43 wrote:
on a Mac running OS 9 with IE 5.1.6 (pretty well the latest and
last for IE on Macs).


IIRC, there is 5.2, a port for OS X (though not a native app).
I must remember that here I am swimming in a pool of folk mainly
PC, so maybe you can safely ignore Mac people on less than OS X.
But believe me, some of the most handsome and intelligent folk
still use OS 9 and IE.


Whether they're intelligent or handsome, I cannot say. But the
migration to OS X is long from over, so it'd be foolish to make
something that's downright broken in IE/Mac. Fortunately, I have a
sister who is forced to use the old OS 9 at work, Unfortunately, she
does not test my creations as often as I'd like. ;-)

Caution: if you stick around here for too long, you may become more
valuable than you'd like, the lone ciwa* participant who can test
things on the Mac platforms.

--
Brian (remove ".invalid" to email me)

Don't know anything about IE 5.2, I expect it is for X via its 9 "classic"
simulation program. IE is still the best browser overall for Macs less than
X. There is a 5.1.7 for OS 9 etc which has a few extra security features but
nothing relevant to CSS. Taking away the "overall", Mozilla and NS 6 do a
better job with many modern CSS techniques - my impression.

About testing, remember, this cuts both ways. It is easier for me to post a
request than walk upstairs to a PC, get on dial up line or fiddle with
transfer disks and see for myself... And if you think numbers count here,
note that a plea for help by one person to many is much more likely to be
successful than a plea by many to one. In fact, Brian, I feel it is probably
an unfair relationship and I shall try hard not to take too much advantage
of you.

Seriously, I am happy to take a quick look at anything emailed directly to
me, folk will need to put in the word CSS in the subject heading or I will
not likely see it.

chart43

Jul 20 '05 #18

P: n/a
> From: Matt <no******@spam.matt.blissett.me.uk>
Subject: Re: css dropdown menus
snip
Do the menus on <http://matt.blissett.me.uk/> function in IE for Mac (as they
are based on the sample menus)?
snip

I don't think I know anyone with a Mac I could access. In October I go to
university, if I get to Imperial (with the AAA grades) I can use their
shiny new Mac lab though :-). Does that make me handsome?

snip (I think)
Matt

The mouse does not hand on the menus on <http://matt.blissett.me.uk/>, there
are no pop outs, but the links do (silently and surprisingly even) work to
open targets.

Your css sheet looks too *complicated* for my brain, I looked ... I forget
my grades.

Straightforward css, html, javascript and tables are winking and beckoning
me back: "pssst, over here... why make trouble?". But then, I remember: The
Copernican solar system was on the whole more elegant and simple than the
old Ptolmaic one in outline and promise, but its actual implementation as a
predictive machine was just as complex as the old, also using epicycles upon
epicycles upon.... The advantageous were not practical ... till Kepler came
along and made the orbits elliptical, then the sparks started to fly and the
solar theory sailed triumphantly on. Perhaps the cutting edge defenders of
CSS are the valiant equivalents of the Copernican warriors of old. Will
Kepler come along. What will his grades be? Will he be ugly as sin. What
does it matter?
Best of luck anyway.

chart43

Jul 20 '05 #19

P: n/a
chart43 wrote:
IE is still the best browser overall for Macs less than X.


Have you tried Opera?
<http://www.opera.com/>

I've used the windows and linux versions, and they're almost identicle, I
assume the Mac version is the same.

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #20

This discussion thread is closed

Replies have been disabled for this discussion.