Wordpress page list & CSS navigation

[A2JC4life]

I hope this is the right place to post this; I'm assuming that most PHP users know CSS, but not necessarily the other way around.

 

I'm pretty new to PHP and to CSS, although I have a fair amount of familiarity with HTML. I'm working on designing a WordPress template, and I think I have most of it written okay. (I haven't written the actual style sheet for my new template yet, but I've been playing with parts and pieces in other template's sheets to learn what they do.) There's one thing I'm still super-stuck on, though.

 

I want a navigation bar that displays only the top-level pages, but puts the child pages in drop-downs when you hover over them. I understand the basic concept of creating the hover options in CSS, placing the "non-hovered" options off-page with negative numbers to make them invisible, etc. But I cannot seem to grasp how to integrate the CSS with the HTML produced by Wordpress's wp_list_pages function. How do I tell the CSS which "tier" it's working with, if I am not producing the HTML to add classes?

 

This is a key part of my layout design, and I just can't seem to wrap my head around it.

[Susie]

Basically what you need to do is implement something like the suckerfish/superfish menus. Really, it has nothing to do with PHP. It's javascript and CSS. Here are some links to get you started:

 

Here's a WordPress plugin that you can purchase to easily create the drop downs: http://pixopoint.com/products/suckerfish_css/

 

http://users.tpg.com.au/j_birch/plugins/superfish/

 

And then once you have the drop downs working, you would just select the page's parent in the WordPress admin to make it drop down from the main menu item.

[A2JC4life]

Not all of those drop-downs are javascript-based, though. There are pure CSS versions, and they don't require plugins.

[falkencreative]

There are pure CSS versions, and they don't require plugins.

There are pure CSS versions, but you need a little bit of javascript to add support for IE6 since it doesn't support the :hover property on anything other than links.

 

The superfish jquery plugin (Susie linked to it above) is the one I've had the most success with in the past. It's essentially a pure CSS based dropdown, with a bit of javascript added for IE6 support and minor visual effects.

 

This is the non-jquery based version: http://www.alistapart.com/articles/dropdowns

[A2JC4life]

Got it (I think); thanks!