Problema innerHTML e cambio CSS

[Alifuma92]

ciao a tutti!
ho una funzione che mi crea un elenco attraverso la stampa di codice con il metodo innerHTML... e fino a li tutto ok...
Poi ho creato un altra funzione che mi dovrebbe permettere di trasformare lo stesso elenco in orizzontale.
Potrebbe essere che elementi creati con innerHTML non recepiscono poi una successiva trasformazione...

Posto le due funzioni.

      <script>
         
      function crea_barra(){
          
          var elementi = document.getElementById('elementi').value;
          
          var box = document.getElementById('a');
          
          box.innerHTML+="<div id='menu' style='border:1px solid black;background-color:red;'><ul id='myul'></ul></div>";
          
          for(i=1;i<=elementi;i++){
              
              document.getElementById('myul').innerHTML+="<li id='opzione_"+i+"'>opzione_"+i+"</li>";
           }
        
       }  
      
      </script>
      
      <script>
      
      var elementi = document.getElementById('elementi').value;
      
      function orizzontale(){
          
          document.getElementById('menu').style.display='block';
          document.getElementById('myul').style.display='block';
          
          for (i=1;i<=elementi;i++){
              
            document.getElementById("opzione_"+i+"").style.display='inline';
          }          
          
      }      


      </script>

Grazie!