Mantén el estado Hover al modificar al niño

Lo había probado, pero me di cuenta de que solo se pueden editar los estilos para el estado de hover.

'''html

.dropbtn { Color de fondo: #4CAF50; color: blanco; acolchado: 16px; tamaño de fuente: 16px; frontera: ninguna; }

.desplegable { posición: relativa; pantalla: bloque en línea; }

.dropdown-content { pantalla: bloqueo; posición: absoluta; Color de fondo: #d42020; Ancho mínimo: 160px; Sombra de caja: 0px 8px 16px 0px RGB (0,0,0,0,2); Z-índice: 1; }

.dropdown-content a { color: negro; acolchado: 12px 16px; decoración de texto: ninguna; pantalla: var(--pantalla); }

.dropdown-content a:hover { Color de fondo: #ddd; --pantalla: bloqueo; }

.desplegable:pasa el cursor {--display: block;} </style>

'''js const editor = grapesjs.init({ Contenedor: '#gjs', fromElement: 1, Altura: '100%', storageManager: { type: 0 }, Plugins: ['GJS-Bloques-Básico'] });

editor. BlockManager.add("menú-desplegable-en-navbar", { etiqueta: 'Menú desplegable', Tab: "1", categoría: "Otros", Tipo: "por defecto", atributos: { Clase: 'fa fa-ellipsis-h', título: 'Insertar menú dinámico de navegación' }, Contenido: ' <div class="desplegable"> <button class="dropbtn">Desplegable</button> <div class="desplegable-content"> <a class="desplegable-content-a" href="#">Enlace 1</a> <a class="dropdown-content-a" href="#">Enlace 2</a> <a class="dropdown-content-a" href="#">Enlace 3</a> </div> '</div> });

! [violín](https://user-images.githubusercontent.com/48953676/80318771-b5d76a00-880c-11ea-84dc-6a563ac2200d.PNG)

También puedes simplemente seleccionar 'div.dropdown-content' y poner su visualización en bloque en el 'Style Manager' y luego volver a ponerlo en ningún cuando termines de editar.