[QUESTION] Keep Hover state when amending the child

@artf Thank you!

I made an example of a working Drop Down List for anyone who comes across this.

https://jsfiddle.net/f74zqpgx/

Adam

Had tried this, but realized you can only edit the styles for the hover state.

<div id="gjs">
  <div style="padding: 25px">Hello World!!!</div>
  <style>
     :root{
        --display: none;
     }

     .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
    }

    .dropdown {
       position: relative;
       display: inline-block;
    }

    .dropdown-content {
      display: block;
      position: absolute;
      background-color: #d42020;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
       z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: var(--display);
    }

    .dropdown-content a:hover {
       background-color: #ddd;
       --display: block;
    }

    .dropdown:hover {--display: block;}
  </style>
</div>

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic']
});

editor.BlockManager.add("dropdown-menu-in-navbar",
  {
     label: 'Dropdown Menu',
     tab: "1",
     category: "Others",
     type: "default",
     attributes: {
       class: 'fa fa-ellipsis-h',
       title: 'Insert Dynamic Menu of Navigation'
     },
    content: `
     <div class="dropdown">
       <button class="dropbtn">Dropdown</button>
       <div class="dropdown-content">
         <a class="dropdown-content-a" href="#">Link 1</a>
         <a class="dropdown-content-a" href="#">Link 2</a>
         <a class="dropdown-content-a" href="#">Link 3</a>
       </div>
     </div>`
});

You can also just select the div.dropdown-content and set its display to block in the Style Manager then set it back to none when you finish editing.