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

[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.