Dropdown Bootstrap incline

[moscrates]

Hola colegas, de nuevo molestando con esto de los css que dan dolor de todo.

mi problema ahora es que necesito que cuando se abra un dropdown se corra , mejor una imagen para entender



los cuadros rojos son dropdown
el cuadro azul es el ul. li que se despliega con el dropdown

lo que necesito es que cuando se despliegue el dropdown ocupe el espacio del recuadro verde. no h epodido mover eso con css

los dropdwon estan dentro de un nav navbar-nav

Código HTML:

<ul class="nav navbar-nav" id="ListaMenu">
    <li>
       <a data-toggle="dropdown" class="dropdown-toggle" href="#" ><?php echo CONSIENTEATUMASCOTA; ?></a>
       <ul role="menu" class="dropdown-menu dropdown-menu-right">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      </ul>
    </li>
    
    <li>
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" >SMUFFIPETS</a>
        <ul role="menu" class="dropdown-menu dropdown-menu-right">
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
      </ul>
    </li>
</ul>
 

agradesco toda ayuda o comentario que me puedan brindar
Saludos