Hi, At the bottom of this article

http://css-tricks.com/convert-menu-to-dropdown/

There is this variation that indents child navigation items:

"A variation of the same concept, where there is nested menus and it makes optgroups in the select based on the parent/child relationships."

http://css-tricks.com/examples/ConvertMenuToDropdown/optgroup.php

Looks simple, but the links don't work(even in the demo). It adds the space and the dash into the URL as well as the select nav.

 // DOM ready
 $(function() {

    // Create the dropdown base
    $("<select />").appendTo("nav");

    // Create default option "Go to..."
    $("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Go to..."
    }).appendTo("nav select");

    // Populate dropdown with menu items
    $("nav > ul > li").each(function() {

      var el = $(this);

      var hasChildren = el.find("ul"),
          children    = el.find("li");

      if (hasChildren.length) {

        $("<optgroup />", {
          "label": el.find("> a").text()
        }).appendTo("nav select");

        children.each(function() {

          $("<option />", {
            "text": " - " + $(this).text()
          }).appendTo("optgroup:last");

        });

      } else {

        $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");

      } 

    });

   // To make dropdown actually work
   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
    $("nav select").change(function() {
      window.location = $(this).find("option:selected").val();
    });

 });  

Any javascript experts know how to fix this?
Thanks

ps: there's no visible search on this forum.