Problema di allineamento del testo in apice (vertical-align:super)

[muzio]

Ciao a tutti,
ho un problema di allineamento del testo di un menù quando un solo elemento presenta del testo formattato apice; ciò che accade in questo caso è un disallineamento del testo che contiene un testo in apice rispetto agli altri elementi.

Questo è il codice:

<style>  
  #menu{width:300px;height:100px;background:#ABD4E6;}
  #menu ul{list-style:none;}
  #menu li{float:left;background:#054664;padding:20px;}
</style>


<div id="menu">
  <ul>
    <li>Home</li>
    <li>App<span style="vertical-align: super;">*</span></li>
    <li>Contacts</li>
  </ul>

 </div>

Ho provato diverse strade, allineamento verticale del testo usando l'attributo display:table-cell oppure specificando l'altezza della linea ma non ho risolto.

Qualche idea?
Grazie mille

[Nobody33]

Invece di una lista puoi rinchiudere tutti gli elementi in dei contenitori con una classe di modo ché sei più libero di muoverti.