treeview checkbox menus

well, I am trying to write parallel checkbox menus in html, but somehow my logic is not helping. May be some of you experts can just help me a bit. This is how I want my menus to look

[] Menu 1                   [] Menu 2

   [] Item 1      开发者_运维知识库            [] Item 5

   [] Item 2                  [] Item 4 

Item 1, 2 are under Menu 1 and 5,4 are under Menu 2. Square brackets indicate checkboxes. Items under menus are actually collected dynamically and their numbers under different menus can vary.

I would suggest using lists and floated divs. Lists can make it easy to nest as many checkbox trees as you'd like.

<div style="float:left;">
Menu 1
<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
        <li>Item 2a</li>
        <li>Item 2b</li>
        </ul>
    </li>
</ul>
</div>

<div style="float:left; margin-left:30px;">
Menu 2
<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
        <li>Item 2a</li>
        <li>Item 2b</li>
        </ul>
    </li>
</ul>
</div>

This would have double nesting. You can make as many checkboxes as you want at a certain indent interval by just adding more list items <li> to a given unordered list <ul> tag.

If your question is only about HTML and CSS, you can use padding and margin attributes to make appropriate indent.

If yuor question about programming logic for generating such tree structure, write please what language you are using.

You might want to look at the jquery library jstree. I use that for my treeview, it's definitely the most advanced treeview available.
it is amazingly configurable, and easy to use. it has a checkbox plugin that I use in my project. That works perfectly for me.
The development is very active, so even if you might find an issue, the developer is very reactive and will help you.

take a look here : http://jstree.com and the checkbox demo is here

good luck :)