Create a Sliding Door Hybrid menu from nested ULs

Join the fight! We want YOU!

[Fotiman]

```+--------+`+--------+`+--------+ 
```¦ Item 1 ¦`¦ Item 2 ¦`¦ Item 3 ¦ 
--------------+ `````` +--------------------- 
`` Child 2.1 `` Child 2.2 `` Child 2.3 `````` 
--------------------------------------------- 

Figure 1

Many of us are familiar with the "Sliding Doors" techniques documented at the "A List Apart" website. You may also be familiar with another technique documented on that site called "Hybrid CSS Dropdowns". This method describes how to take 2 levels of <ul>'s, and create something that looks similar to Figure 1 above.

One problem with the Hybrid CSS Dropdowns is that they use absolute positioning for the 2nd level, which could lead to problems with the layout if the visitor changes his/her font size. In addition, it would be nice if the Sliding Doors technique could be used to make things look nicer. Also, it would be REALLY nice if the second level could also using the sliding doors technique to create output like that in Figure 2:

```+--------+`+--------+`+--------+ 
```¦ Item 1 ¦`¦ Item 2 ¦`¦ Item 3 ¦ 
--------------+ `````` +--------------------- 
````````````````````````````````````````````` 
``+-----------+`+-----------+`+-----------+`` 
``¦ Child 2.1 ¦`¦ Child 2.2 ¦`¦ Child 2.3 ¦`` 
--+```````````+------------------------------ 

Figure 2

Personally, I'd like to see this as a WebmasterWorld.com library item, getting the community involved in the development work. We may find that it's simply not possible to do. But I am throwing down the gauntlet. Will you accept this challenge? :)

To get things started, we need a list. For this example, we'll mark a tab as the "current" tab by assigning it a class of "on", and all other non-current tabs will have no class. I realize there are other methods using id values that may be used in combination with some parent identifier, but to keep this simple I'm just using the class for now. Also, I'm leaving the href values empty, since they don't apply in this case.

<ul id="nav"> 
 <li><a href="#">Item 1</a> 
 <ul> 
  <li><a href="#">Child 1.1</a></li> 
  <li><a href="#">Child 1.2</a></li> 
 </ul> 
 </li> 
 <li class="on"><a href="#">Item 2</a> 
 <ul> 
  <li class="on"><a href="#">Child 2.1</a></li> 
  <li><a href="#">Child 2.2</a></li> 
  <li><a href="#">Child 2.3</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Item 3</a> 
 <ul> 
  <li><a href="#">Child 3.1</a></li> 
 </ul> 
 </li> 
</ul> 

Future Expansion
Once the above example is worked out (or shot down), could it potentially be extended so that it could apply to even more levels of nested lists? For example:

```+--------+`+--------+`+--------+ 
```¦ Item 1 ¦`¦ Item 2 ¦`¦ Item 3 ¦ 
--------------+ `````` +--------------------- 
````````````````````````````````````````````` 
``+-----------+`+-----------+`+-----------+`` 
``¦ Child 2.1 ¦`¦ Child 2.2 ¦`¦ Child 2.3 ¦`` 
--+```````````+------------------------------ 
````````````````````````````````````````````` 
``+-------------+`+-------------+```````````` 
``¦ Child 2.1.1 ¦`¦ Child 2.1.2 ¦```````````` 
------------------+`````````````+------------ 

Figure 3

Also, I imagine different colors at each tab level. For example:

``` background-color: #000099; `````````````` 
```+--------+`+--------+`+--------+ 
```¦ Item 1 ¦`¦ Item 2 ¦`¦ Item 3 ¦ 
--------------+ `````` +--------------------- 
``` background-color: #4040B3; `````````````` 
``+-----------+`+-----------+`+-----------+`` 
``¦ Child 2.1 ¦`¦ Child 2.2 ¦`¦ Child 2.3 ¦`` 
--+```````````+------------------------------ 
``` background-color: #8080CC; `````````````` 
``+-------------+`+-------------+```````````` 
``¦ Child 2.1.1 ¦`¦ Child 2.1.2 ¦```````````` 
------------------+`````````````+------------ 
``` background-color: #BFBFE6; `````````````` 
--------------------------------------------- 
``` background-color: #FFFFFF; `````````````` 

Figure 3

[Fotiman]

One problem with the Hybrid CSS Dropdowns is that they use absolute positioning for the 2nd level, which could lead to problems with the layout if the visitor changes his/her font size.

More specifically, it uses absolute positioning with pixel dimensions instead of em values. Had the design used ems, the perhaps a layout could still be achieved that did not cause problems when the text was resized.