javascript - <span> tags for top og undermener...

Hej drenge og piger.

Jeg har en lille udfordring som jeg håber I kan hjælpe med.
Jeg har efterhånden brugt alt for lang tid på den.
Jeg er ikke nogen haj til scripts i det hele taget så jeg sætter min lid til jer :D

Jeg har et Wordpress tema som i udgangspunktet IKKE understøtter undermenuer.
Jeg har dog behov for at tilføje en niveau's undermenu i temaet.
Det er sådan set også gået meget godt. MEN js scriptet genererer noget tekst (li_text) imellem 2 <span> tags.

Scriptet ser ud som følger:

var $main_menu = $('#main_menu');

        $main_menu.find('li').each( function(){
            var $this_li = $(this),
                li_text = $this_li.find('a').html();
               
            $this_li.find('a').html( '<span class="main_text">' + li_text + '</span>' + '<span class="menu_slide">' + li_text + '</span>' )
        } );

Det er selvfølgelig taget ud af en sammenhæng i en større js fil.

Teksten (li_text) er, så vidt jeg kan se, navnet på den pågældende side i Wordpress. Og dette bliver indsat inde i hver <span> tag.

Her er et udsnit af HTML koden:

<li id="menu-item-55" class="has_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-55 odd">
      <a href="http://xxx.xx/?page_id=53">
        <span class="main_text">MEDIA</span>            <---- Se note 1 nedenfor
        <span class="menu_slide">MEDIA</span>          <---- Se note 1 nedenfor
      </a>
        <ul id="sub-menu" class="sub-menu" style="display: none;">
          <li id="menu-item-67" class="mcdu_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
            <a href="http://xxx.xx/?page_id=60">
              <span class="main_text">                          <-----  Se note 2 nedenfor.
                <span class="main_text">MEDIA</span>    <---- Se note 3 nedenfor.
                <span class="menu_slide">MEDIA</span>  <---- Se note 3 nedenfor.
              </span>
              <span class="menu_slide">
                <span class="main_text">MEDIA</span>    <---- Se note 4 nedenfor.
                <span class="menu_slide">MEDIA</span>  <---- Se note 4 nedenfor.
              </span>
            </a>
        </li>
        <li id="menu-item-66" class="mcdu_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
      </ul>
  </li>

Noter til ovenstående HTML:

1. Her indsætter scriptet det rigtige navn og HTML koden er som den skal være.

2 . Hvorfor oprettes der en <span> tag inde i en <span> tag???

3. Her skulle sidetitlen 'BILLEDER' være indsat - men i stedet indsættes sidetitlen fra top li. Hvorfor?

4. Her skulle sidetitlen 'VIDEO' være indsat - men i stedet indsættes sidetitlen fra top li. Hvorfor?


Problemet:

Som det fremgår af noterne ovenfor så handler det konkret om at jeg kan ikke få scriptet til at give 'li_text' sit navn fra den 'direkte' side over <span> tagget.
Den tager, så vidt jeg kan se, navnet fra sin 'top' li ....

Hvordan skal det ovenstående js script modificeres så jeg opnår at det rigtige navn bliver indsat i ALLE <span> tags`? og ikke kun i top level menuerne....

Der er 30 points på højkant her og jeg fordobler gerne ved en hurtig løsning.

ACTION .... ;)