title: selectmenu indent text in jquery
body: <p>I've a select. And I want to have a cascading display between parent and child. All is dynamic.
  I want something</p>
  
  <pre><code>Parent1
    |---Child1
    |---Child2
    |     |---Child21
    |     |     |---Child211
    |     |---Child22
  Parent2
  </code></pre>
  
  <p>...
  I write this code:</p>
  
  <pre><code> $(function () {
      GetlstParents();
      $("#lstFiltreFamParent").selectmenu().selectmenu("menuWidget").addClass("lstFiltreoverflow");
  
      });
  
      function GetlstParents() {
      $.ajax({
          type: "POST",
          url: "/Classement/Interne.aspx/GetlstParents",
          data: '{"PageEnCours":"' + document.location.href.toString() + '"}',
          contentType: 'application/json; charset=utf-8',
          dataType: "json",
          success: function (msg) {
              if (msg.d.Retour.Reussi) { BuildLstParents(msg.d.LstParents); }
              else { AfficheMsgRetour(msg.d.Retour); }
          },
          error: function () { AfficheMsgRetour({ Reussi: false, Titre: "Liste des classements   parents", Msg: "Erreur accès fonction." }); }
      });
      }
  
      function BuildLstParents(Lst) {
      var LaList = $("#lstFiltreFamParent");
      $('option', "#lstFiltreFamParent").remove();
      //var Spacelst = "|&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;";
      var Spacelst = "|         ";
      $.each(Lst, function (i, item) {
          LaList.append($('&lt;option&gt;', { value: item.Id,  text: Spacelst.repeat(item.Depth -1) +"|--- " +  item.DisplayName }));
      });
      }
  </code></pre>
  
  <p>It's run perfect, the only problem is the white space are smaller than a letter. And the display is not really good. 
  I've 3 choises</p>
  
  <ol>
  <li>change font ... I prefer solution work with all font</li>
  <li>replace white space by ...?</li>
  <li>use CSS : but how put recurcive ?</li>
  </ol>