Problemas con Internet Explorer

[alfuco]

Pongo como ejemplo la barra de inicio ya que toda la página principal no me cabe:

Código:

<section id="barra_inicio">
<ul>

<li><a class="negro">Acerca de Siens</a>
<ul>
<li><a href="nuestra_firma.html">Nuestra firma</a></li> <li><a href="nuestra_vision.html">Nuestra visión</a></li> 
</ul></li>  
  
<li><a class="negro">Soluciones</a>
<ul>
<li><a href="gestion_de_cuentas.html">Gestión de cuentas</a></li> <li><a href="gestion_terminologica.html">Gestión terminológica</a></li> <li><a href="consultoria_multilingue.html">Consultoría multilingüe</a></li><li><a href="gestion_de_la_calidad_linguistica.html">Gestión de calidad lingüística</a></li>
</ul></li>         

<li><a class="negro">Servicios</a>
<ul>
<li><a href="traduccion.html">Traducción</a></li><li><a href="localizacion.html">Localización</a></li><li><a href="gestion_de_proyectos.html">Gestión de proyectos</a></li><li><a href="validacion_linguistica.html">Validación lingüística</a></li><li><a href="ingenieria_linguistica.html">Ingeniería lingüística</a></li><li><a href="autoedicion.html">Autoedición</a></li><li><a href="postediting.html">Post-editing &amp; Big data</a></li><li><a href="interpretacion.html">Interpretación</a></li>
</ul>
</li> 

<li><a class="negro" href="especializacion.html">Especialización</a>
<ul>
<li><a href="siens_med.html">SIENS </a><a href="siens_med.html" class="blues">Med</a></li><li><a href="siens_engitech.html">SIENS </a><a href="siens_engitech.html" class="oranges">EngiTech</a></li><li><a href="siens_energy.html">SIENS</a> <a href="siens_energy.html" class="greens">Energy</a></li><li><a href="siens_legecon.html">SIENS </a><a href="siens_legecon.html" class="browns">LegEcon</a></li>
</ul></li>

<li><a href="tecnologia.html" class="negro">Tecnología</a>
<ul>
<li><a href="herramientas_terminologicas.html">Herramientas terminológicas</a></li> <li><a href="soluciones_linguisticas.html">Soluciones lingüísticas</a></li> 
</ul>
</li>

<li><a href="contacto.html">Contacto</a>
</li>  

<li><a href="careers.html">Careers</a>
</li> 

</ul>   
</section>

Código:

#barra_inicio {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color:#999;
  text-align: center;
  top:8%;
  right:1.5%;
  position:fixed;
  z-index:99999999;
  text-decoration:none;
}

#barra_inicio ul {
  text-align: left;
  display: inline;
  color:#999;
  padding: 1.5rem 0.4rem 1.5rem 0;
  list-style: none;
  -webkit-box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.15);
  	text-decoration:none;
}

#barra_inicio ul li {
  font-size:0.9rem;
  color:#999;
  display: inline-block;
  margin-right: 0%;
  position: relative;
  padding: 0.95rem 1.25rem;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration:none;
}

#barra_inicio ul li a{
	text-decoration: none;
}

#barra_inicio ul li:hover {
  border-bottom: 0.2rem solid #475678;
  text-decoration:none;
}

#barra_inicio ul li ul {
  padding: 0;
  position: absolute;
  top: 3rem;
  left: 0rem;
  width: 10rem;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  	text-decoration:none;
}

#barra_inicio ul li ul li { 
  display: block; 
  color: #475678;
  text-decoration:none;
}

#barra_inicio ul li ul li:hover { 
  background: #FFF;
  border: 0rem;
  color:#475678;
  text-decoration:none;
}

#barra_inicio ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  	text-decoration:none;
}