Vertical CSS Dropdown Menu

Creating a Vertical CSS Dropdown Menu is very easy with DBTree. Simply include our javascript file "dbtree.js" in the header of your page. Then put DBTree where you want to appear the menu and set instancename, datasource and the other attributes like described here under DBTree Configuration. Make sure you have set the attribute type="hovertree" to make dbtree behave like a mousover menu. You could also set the attribute timeout="[milliseconds]" to control the delay time for closing the submenus when the mouse goes out. Here's a demo.

Then include a CSS-Stylesheet in the header wich gives the look and feel for your menu. You can take our basic styles for a horizontal or a vertical menu and modify them to suit your needs. The CSS used for this menu is in the box below.

Page Header

<head>
<script src="dbtree.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

DBTree Configuration

<cf_dbtree
instancename="id of the menu"
datasource="name of the datasource"
table="name of the database table"
action="get"
type="hovertree"
url_type="db"
url="column name"
id="column name"
parent="column name"
contentfield="column name"
titlefield="column name">

CSS of this Example