Estou tentando converter (com jQuery) um multi-nívelUL dentro deSELECT suspenso com o @ aninhaUL grupo envolvido emOPTGROUPSs. Estou brincando com a idéia de usar essa técnica para criar menus responsivos do site (pense nos menus suspensos

Eu converti itens de lista em uma lista suspensa de opções no passado, mas nunca com optgroups, e não consigo descobri

Um exemplo do meuUL estrutura;

<ul id="sitemap">
    <li><a href="www.google.com">Home</a></li>
    <li><a href="www.google.com">Small Business</a>
        <ul>
            <li><a href="www.google.com">Laptops</a></li>
            <li><a href="www.google.com">Workstations</a></li>
            <li><a href="www.google.com">Workstations</a></li>
            <li><a href="www.google.com">Printers</a></li>
            <li><a href="www.google.com">Mobile Phones</a></li>
        </ul>
    </li>
    <li><a href="www.google.com">Public Sector</a>
        <ul>
            <li><a href="www.google.com">State Government</a></li>
            <li><a href="www.google.com">Federal Government</a></li>
            <li><a href="www.google.com">Support and Drivers</a></li>
        </ul>
    </li>
    <li><a href="www.google.com">Large Enterprise</a>
        <ul>
            <li><a href="www.google.com">Services</a></li>
            <li><a href="www.google.com">Solutions</a></li>
        </ul>
    </li>
</ul>

Exemplo do que eu me tornei;

<select id="sitemap">
    <option href="www.google.com">Home</option>
    <optgroup label="Small Business">
        <option href="www.google.com">Laptops</option>
        <option href="www.google.com">Workstations</option>
        <option href="www.google.com">Printers</option>
        <option href="www.google.com">Mobile Phones</option>
    </optgroup>
    <optgroup label="Public Sector">
        <option href="www.google.com">State Government</option>
        <option href="www.google.com">Federal Government</option>
        <option href="www.google.com">Support and Drivers</option>
    </optgroup>
    <optgroup label="Large Enterprise">
        <option href="www.google.com">Services</option>
        <option href="www.google.com">Solutions</option>
    </optgroup>
</select>

Não precisa ir além de um nível - e tenho certeza de que os grupos de opções realmente não funcionam tão bem assim tão profundamente. Qualquer ajuda que você possa contribuir seria muito bem-vinda. Obrigado