barra de menú responsive

[LordJhony]

Hola...
Tengo el siguiente código html en mi pagina

Código HTML:

<header class="intro-header" style="background-image: url('urlimagen/imagen.png');" >
         
<div class="content">
  <div id='cssmenu'>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li class='active'><a href='#'>Soluciones</a>
        <ul>
          <li><a href='#'>Solución 1</a></li>
          <li><a href='#'>Solucion 2</a></li>
          <li><a href='#'>Solucion 3</a></li>
        </ul>
      </li>
      <li><a href='#'>Beneficios</a></li>
      <li><a href='#'>Clientes</a></li>
      <li><a href='#'>Empleos</a></li>
      <li><a href='#'>Blog</a></li>
    </ul>
  </div>
</div> </header>
 

Ya logre que el menú se vea bien en dispositivos móviles, pero lo que requiero es que cuando lo despliegue la imagen del fondo del header se desplace hacia abajo, es decir, que no sea tapada por el menú.

Alguien me podría decir como lograr eso?