CSS drop down menus

[triskellian]

I mentioned on secretrebel's journal earlier today that I'd been playing with a new CSS trick. chrisvenus and wimble both asked what it was, and I said I'd post the details here.

It's a nice method of making drop-down menus with CSS... I found the technique at A List Apart, but that only worked with two levels of nested menus. I've now fiddled with the stylesheet to make it work with three levels.

The working version is here, and this is the CSS. The 'leftcol' div needs to appear after the 'content' div in the HTML, to make sure that the expanding menus display over the top of the content div.

(To work with IE, the technique requires a teensy bit of Javascript, which is documented on the ALA page. I didn't include it, because I'm working on pages only I will use, and I never use IE.)

Comments

[wimble.livejournal.com]

Oddly, while the original works fine for me under opera, your version has alignment issues. But it does work fine under Firebird, which I guess is your target audience.

http://mrwolf.afraid.org/~tommy/triskell.jpg

Spot the slight difference in length between items 1.1 and 1.2, and the resulting gap between item 1.2 and the submenu (each top level item gets a touch longer as its submenu appears). And of course, the huge gap before the third level. :-)

I might have a think about why, if I can be bothered. Maybe.

[bateleur.livejournal.com]

Broken link.

[wimble.livejournal.com]

Should now be fixed.
a) Bloody XP/samba. Saved it with a .JPG extension, not .jpg
b) Damn you for checking it about 23 seconds before I confirmed it fixed!

[triskellian]

Possibly the IE fix also deals with Opera, but since my target audience is me alone, and I exclusively use Safari at home and Mozilla at work, I didn't see any point in including the IE tweaks.

[bateleur.livejournal.com]

I take it that the "to work with IE" comment implies that when using IE the page should sit there doing nothing ? That's what it does, anyway.

[wimble.livejournal.com]

Hence the which I've not included...

[onebyone.livejournal.com]

Correct. The problem is that the CSS spec says of the "hover" and "active" dynamic pseudo-classes that "CSS doesn't define which elements may be in the above states, or how the states are entered and left".

IE only allows links to be in the "hover" state (and it's that state which triggers the expanding of the sublist), whereas apparently everyone else in the known universe allows li to be in "hover" too.

[ex-kharin447.livejournal.com]

Works fine in Mozilla 1.6.

[uitlander]

Indeed. And I have often wondered how you do that with CSS, so now I know. Thanks!

[triskellian]

I have often wondered...
Me too, so I was ecstatic to find it. And more ecstatic to do the work myself to make it work on three levels ;-)

[chrisvenus]

shiny! You can tell I've been doing IE stuff too long cos I thought you had to have JS to do that... :)

[triskellian]

You do need JS to do it in IE, but only a teeny tiny bit to make it display the styles properly, rather than honky great chunks of it controlling the whole lot. Isn't it shiny? :-)

Mind you, I need to do some more work on the CSS. There's stuff in there that doesn't need to be, and the third level really shouldn't need to be a different class (Different Class!) from the others...

[chrisvenus]

I was wondering if you really needed the third level classes to be different but I decided I didn't have time to go playing with the CSS.

Though that does remind me, since you seem to be a CSS whizz would you by any chance know off the top of your head how I can get some stuff to stick to the bottom of my browser window? Basically a table like structure which has "footer" information in it and currently it bounces up and down according to page length so I want to stick it to the bottom of the window if possible. I supect this should be possible with the CSS positioning but I've not played iwth it much and I wondered if you had...

Don't worry about it too much if you can't just say "Oh, yeah, do this." but I thought I should ask rather than spending hours and finding that you could have told me in 2 minutes... :)

[triskellian]

Yeah, I'm gonna work on the third level stuff some more later. It should be possible to get it to work with just this bit:

li ul li:hover ul.subnav {display: block;}

But it didn't on my first attempt last night, and I ran out of time. I'll make another attempt tonight.

Getting stuff to stick to the bottom of your window. Define a new class with positioning at the bottom of the window (much like my 'leftcol' in the example is positioned at the left of the window), and then put the stuff you want in the footer in a div with that class.

That's the short answer. The long answer is that you'll have to fiddle with it to make it behave in the cases where your page content is more than a windowful, since it's bound to overlap with the content, or scroll in a way you don't want it to, or something.