Dynamic/Infinate UL / LI Hover expand....?

I have created a PHP script that makes a lovely list....

Using a database it creates lots of items and sub items. As it is from a database, they can be infinitively deep list and sub lists.

How can I used CSS (or put the code in the UL/LI directly) to allow INFINITE sub items to be displayed as and when their parents are hovered over?

Example:

<ul>
  <li>Welcome! - LevelNo:0 ID:1 Parent:0 Order:0</a>
    <ul>
      <li>Test - LevelNo:0 ID:13 Parent:1 Order:-3</a></li>
      <li>Cars - LevelNo:1 ID:2 Parent:1 Order:0</a>
        <ul>
          <li>Bugatti - LevelNo:2 ID:5 Parent:2 Order:0</a></li>
          <li>BMW - LevelNo:2 ID:6 Parent:2 Order:1</a>
            <ul>
              <li>1 Series - LevelNo:3 ID:8 Parent:6 Order:0</a>
                <ul>
                  <li>1 Series D- LevelNo:0 ID:14 Parent:8 Order:0</a></li>
                </ul>
              </li> 
              <li>3 Series - LevelNo:3 ID:9 Parent:6 Order:1</a></li>
              <li>5 series - LevelNo:3 ID:10 Parent:6 Order:2</a>
            <ul>
              <li>525 - LevelNo:4 ID:11 Parent:10 Order:0</a></li>
              <li>M5 - LevelNo:4 ID:12 Parent:10 Order:1</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Noble - LevelNo:2 ID:7 Parent:2 Order:2</a></li>
    </ul>
  </li>
  <li>Vans - LevelNo:1 ID:3 Parent:1 Order:1</a></li>
  <li>Trucks - LevelNo:1 ID:4 Parent:1 Order:2</a></li>
</ul>
<br>

I have found plenty of examples to show how to do it with one child (two deep) or a child with a child (three deep) but nothing that is dynamic to show it to 15 deep, if that is the number of sub items added.

Anyone have any ideas on this?

I can alter the code generating the list, to use a CSS... can anyone point me in the righ开发者_JAVA技巧t direction?

First of all, let me say that a list that's INFINITELY big is a big UI uh-oh. The deeper it gets, the less user friendly it is.

That being said, I have one of these such lists that I'm nursing along until the app can be re-designed. My former coworker opted to output valid HTML nested UL's as you have done. For presentation, nothing we've found can beat jQuery Superfish.

How deep could it go? Infinite. I've seen it at 7 in my app. Again, if given the choice, I wouldn't do it....but you could.

Why jQuery when technically it --could-- be done with pure CSS? Progressive enhancement for starters. Low overhead with graceful fallback. And the presentation allows for transitions, dynamic sizing of large elements, etc. It's code that you would do if you had time to build, deploy, and run several hundred unit tests.

All with a simple $('#id').superfish() call.

I would suggest that you try something like this:

ul { display:none; }
*:hover > * { display: block; } 
* *:hover { display: block; }
*:hover { display: block; }

Whenever you hover a ul all child ul are displayed (2nd rule), all parent elements are displayed (3rd rule) and the element itself is displayed (4th rule).

This is just a sketch I did not try it in any browser and I expect there are a lot of incompatibilities.