Introduction to CSS Tree Menu
The following tutorial will show you how to make a simple Tree Menu. To get started, click the Tree Menu icon 
by accessing the PluginLab panel in Dreamweaver MX 2004 and 8, or go to Insert > PluginLab > CSS Tree Menu.
In this tutorial we will show you step by step how to create the menu below using Tree Menu Extension.
1. Create the menu structure:
To make the first node level, type your button names and their target URLs in the Text and URL fields. Choose the link target from the Open In options. Click the button to add each new entry.
To make the second node level, simply type the 
button name and URL, and use the button to move the button and create the second level node.
By clicking the button you can easily create unlimited node levels.
Now click 
Save the page in Dreamweaver, and press F12 to preview. Using the default settings in Tree Menu, here is what you should see:
2. Set up Tree Menu Style:
Next you have to open the General tab and define your Tree Menu style settings. You need to set up the Tree Menu width and its outer padding. Also you may define any background color you wish (in our example the background color is transparent). Checking in the Show Tips box turns on the showing tips function.
Also you may choose from different collapse/expand animation styles and set up your own animation speed.
3. Customize your Tree Menu:
Open the Item CSS Settings tab to display the settings for CSS classes. You already have one CSS class named TV on default.
Please note all your CSS settings are stored in one file which is automatically saved in the CSS folder (in our example it's /Pluginlab/CSS/treemenu.css).
In our example we have our CSS class settings defined in the way shown below:Font Arial and Size 11
- Border Width: 0
- Normal text color: #888888
- Mouseover text color: #0080C0
- Selected text color: #005177
- Normal Background: White
- Mouseover and Selected Backgrounds: Transparent
To define your tree images you have to open the Tree Image tab.
In the Tree Lines group box you may choose from two states - Show lines or Do Not Show. Choosing the Show lines state enables you to set up your own expand/collapse branch images, lines and space images, or to use the default settings.
By clicking the 
folder you may set up your own branch images, r-, l-, T- and L-lines images and space image. In our example we use the following:
To add icons to your buttons you need to open the Setup tab, then select the item you want to add an icon to and choose your own icon by clicking the button. Do the same for all buttons you want to add icons to.
In our example we use different icons for the first level nodes, and we use the same icon for the second and third level nodes.
There is no need to set up the same icon for all sibling nodes manually. You just have to define one button icon and then simply press the 
button. The same icon will be added to all sibling nodes.
Now click
Save the page in Dreamweaver, and press F12 to preview. You should see something similar to this:
Now re-enter the extension and the menu source is read back in allowing you to edit and update your Tree Menu. You can spend some time experimenting with the color, style, and animation settings. There are endless possibilities that you can choose from to seamlessly integrate your menu into your site.
When you're satisfied with the style, simply click 
and the extension will update every page on the site that is using the Tree Menu system.
For more information see:
Store