menu blocks

This definitely seems like a common use-case, but in practice is a little tricky.

I took a look at the Nice Menus module to see if it would meet your case, but it doesn't appear to. It provides a few options for fancy expandable menus, but they are more complicated than just opening or closing the sub-menu. Here is a screenshot from the Nice Menus module, set to use the "right" style of menu expanding:

The module doesn't appear to be responsive, so on mobile devices this menu becomes completely unusable.

Specifically what you asked for was "display 2nd-level menu items on a hover or click", and those are separate, but similar, conflicting use-cases. Consider this: what if your top-level menu items are links themselves? Then if you click on a top-level menu item, should that click send the user to the link, or should it expand the sub-menu items? You can't do both.

Additionally, consider that someone can't "hover" on a mobile device.

I believe ultimately what you'll want to do is have your top-level items not be links at all, but be containers for sub-menus. That way when someone clicks on those top-level items, then you know that they want to open the sub-menu as opposed to visit a link.

One way to achieve this is to add some javascript to your site that will handle the opening and closing of sub-menus when a top-level item is clicked. It's hard to provide the perfect code for every site, but here is an example.

<script>
var $block_menus = $('.block-content > .menu-tree .has-children');
$block_menus.find('ul').hide()
$block_menus.find('> a').click(function(e) {
  e.preventDefault();
  // close all open sub-menus
  $(this).closest('ul').find('ul').hide();
  // open the sub-menu for the item clicked.
  $(this).siblings('ul').show();
});
</script>

If you are familiar with modifying theme code, they you should be able to put this in the right place in your theme.

If you're not familiar with modifying your theme, then the easiest way to add this to your site would be to create a custom block on your site with this code as the block content (set the format to Full HTML), then place that block in the footer of your layouts.

Again, this isn't the perfect solution to a complex problem, I just wanted to provide somethings to think about, and maybe a little direction.

Here is a screenshot of my custom block:

Here is a screenshot of how I've placed it in the footer of a layout:

And here is a gif of this exact code working on my test site:

I'd recommend the dropdown style even if it displays the menu items with "nowrap" by default, so that long items run over the right edge. Problematic in this case, but easy to change by overwriting the CSS, for instance this way:

@media (min-width: 48em) {
  .l-sidebar .menu-dropdown a {
    white-space: unset;
  }
}

To overwrite CSS, you could create a subtheme or use a module like CSS Injector.

The menu creation would certainly be more convenient without the need to overwrite CSS. Actually, out of the box all the menu styles don't look good in the sidebar. That's fine for me because I tend to adapt the menu CSS anyway. On the other hand, the dropdown style looks even broken in a sidebar because the list items are floating left.

I guess it makes sense to suggest some improvements regarding sidebar menus in the Backdrop core queue.

edit: I've made two suggestions in the core queue: https://github.com/backdrop/backdrop-issues/issues/3400