CSS drop down menus
Jul. 6th, 2004 09:51 pmI 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.)
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
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.)