Is there an Easy CSS Vertical multilevel drop down menu?

HTML & CSS
1

Hello,

I need a css vertical multilevel drop down menu with the possibility of infinite levels. My menu is dynamic, in a database table, it would be generated by php/mysql and will be something like this:


<ul>
              <li><a href='#'>Level 1.1</a>
                 <ul>
                 <li><a href='#'>Level 1.1.1</a></li>
                 <li><a href='#'>Level 1.1.2</a></li>
                </ul>
              </li>
              <li><a href='#'>Level 1.2</a>
                <ul>
                <li><a href='#'>Level 1.2.1</a>
                  <ul>
                  <li><a href='#'>Level 1.2.1.1</a></li>
                  <li><a href='#'>Level 1.2.1.2</a></li>
                 </ul>
               </li>
                <li><a href='#'>Level 1.2.2</a></li>
              </ul>
              </li>
</ul>

I need something very simple, easy to set up, with the minimum markup/ccs, no javascript if possible, because I would like to add a jQuery effect to the link (anchor).

I saw this link: http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html

But I do not know
1.- If it will allow infinite sub-levels
2.- And how to convert it to a vertical menu

I appreciate a lot your kind help to adapt this to my needs or to provide a link to a menu with these characteristics, if it is of free use the better.

Best regards
joejac

2

Hi, as long as you understand multi level dropdowns as explained by suckerfish
http://www.htmldog.com/articles/suckerfish/dropdowns/

As long as you understand that, you can keep adding CSS for up to infinite layers. You could just have that CSS in the file and depending on how big your dropdown is, it would cater for that :).

To turn it vertical, just don’t float it :slight_smile:

3

Thanks a lot Ryan,

But unfortunately I do not know how many levels would have the vertical menu, because they are dynamic, from a menu database table. Php will take them out from the database and the css style sheet will have to be smart enough to format “unlimited” levels, theoretically, vertically to the right side of the screen, that is my problem to get a css example that do that. Probably a recursive CSS, I do not know.

I do not know if I was able to explain myself.

I appreciate a lot any insight on this issue.
Thanks a lot
Best regards
joejac

4

Yes I realize that, as long as you write the CSS to accomodate X levels, then X levels can be supported for. Just write CSS (you can take the suckerfish multi level code and just add onto that) and that way, if the need arises, the dropdown can be catered for :slight_smile: