Markdown menu that opens when hovering above the text.

Site URL: https://greyhound-sheep-7z4x.squarespace.com/om-oss-2

Hi!
How do I keep a markdown menu open while I'm moving the cursor inside the markdown box. 
I just watch this video on how to make a accordian styled dropdown menu, which I made with the markdown button. 
I used some HTML and CSS + code inside of the markdown. 

Here is the HTML code: 

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
    $(".markdown-block .sqs-block-content h3").hover(function() {
      
      $(this).nextUntil("h3").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });
    </script> 

And my CSS: 
 

#block-yui_3_17_2_1_1646131305524_2175{ 
  font-size: px;
 left: -1740px;  
 bottom: 980px;
  
} 
#block-yui_3_17_2_1_1646131218070_4998{ 
  font-size: px;
 left: px;  
 bottom: 120px;
 
} 

Password for the website is: test123 

So my first question is does anybody know how I could keep the markdown menu open while browsing around with my cursor in the dropdown menu? 

My second question is how do I stop the accordian styled menu from pushing down the content that is below it.
For example if I hove above the "Tiego" text content inside of that menu pushes the text "Jobba hos oss" further down the page, is there a way to stop it from doing that? 

All the tips are welcomed!

/Tonton
 

Hi,

To add Accordion, no need to use code. You can use Accordion Block, similar way what you added Text Block.