jQuery Forum

I wasn't able to find any plugins for creating nested Select elements (where a 2nd dropdown flies out when you mouseover an option in the parent element), so I'd like to create a function which would modify a nested menu from jQuery UI's menu widget to act as a nested dropdown. I'm using this in a form, and I need to capture the users input the way a dropdown box does in a form.

I'm trying to create a shortcut so the user can either select a value from "Drink" or from "Coffee" without requiring extra steps on the part of the user or taking up more screen space. If I were just creating regular dropdowns these would be set up as 5 Select element named Drinks, Coffee, Tea, Soft Drinks and Water, but in this situation I want to display <select name="Drinks"> and when you mouseover <select name="Drinks"><option value="Coffee"> then <select name="Coffee"> flies out of <select name="Drinks">, <select name="Tea"> flies out when you mouseover <select name="Drinks"><option value="Tea">, etc.

I understand that this can be done by calling an object's innerHTML to create a value for the object, but I haven't been able to figure out how to do it. Something along the lines of:

1. <li onclick="drink(this)">Coffee</li>
2.  function drink(obj) {
           value = obj.innerHTML();
       }

This is an example of what I would like to convert, but instead of this being displayed as a nested menu (which you can see at http://click2fit.com/flyout_menu2.html) I would like to create a dropdown with 4 selectable options (Coffee, Tea, Soft Drinks, Water), and each of those options has a nested Select element (the options for Coffee are Americano, Latte, etc.).

<ul id="drinks">   
    <li>
        <a href="#">Drinks</a>
        <ul>
            <li>
            <a href="#">Coffee</a>
                <ul>                   
                    <li><a href="#">Americano</a></li>                  
                    <li><a href="#">Latte</a></li>
                    <li><a href="#">Cappuchino</a></li>                   
                    <li><a href="#">Espresso</a></li>                   
                    <li><a href="#">Iced</a></li>                   
                </ul>
            </li>
            <li><a href="#">Tea</a>
            <!-- Nested Tea Menu --!>
            </li>
            <li><a href="#">Soft Drinks</a>
              <!-- Nested Soft Drinks Menu --!>
            </li>
             <li><a href="#">Water</a>
            <!-- Nested Water Menu --!>
            </li>
        </ul>
    </li>