CSS drop down menus
Jul. 6th, 2004 09:51 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
triskellianI mentioned on ![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
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.)
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.)
no subject
Date: 2004-07-07 11:29 am (UTC)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.