To implement a popover menu that opens on hover in OutSystems, you can achieve this using a combination of OutSystems UI elements and custom CSS. Here's how you can recreate the hover menu functionality as described in your example:

Approach:

1. Create the Menu Structure:

• Use a container for the main menu items (e.g., "Remessa") and another container inside it for the submenu items (e.g., "Gerar/Editar Remessa", "Receber Remessa", "Consultar Remessa").
• Each of these containers should be styled appropriately in your module.

2. Add CSS for Hover Interaction:

• Use the hover pseudo-class in your CSS to make the submenu visible when the mouse hovers over the main menu item.
• The custom CSS might look like this:

/* Style for main menu item */
.MainMenuItem {
  background-color: #007BFF; /* Blue Background */
  color: white;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

/* Style for submenu items, hidden by default */
.SubMenu {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: white;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Show submenu on hover */
.MainMenuItem:hover .SubMenu {
  display: block;
}

3. Apply the CSS Class in OutSystems:

• In your screen or block, assign the MainMenuItem CSS class to the container representing the main menu item.
• Assign the SubMenu CSS class to the container representing the submenu.

4. Ensure Responsiveness:

• Use absolute positioning for the submenu and test it in different screen sizes. Adjust the CSS positioning, widths, or margins if necessary.

Example Setup:

Using the information from , here's an example setup that matches the "Remessa" menu structure:

<div class="MainMenuItem">
  Remessa
  <div class="SubMenu">
    <div>Gerar/Editar Remessa</div>
    <div>Receber Remessa</div>
    <div>Consultar Remessa</div>
  </div>
</div>
<div class="MainMenuItem">Relatórios</div>
<div class="MainMenuItem">Transferência</div>

Additional Notes:

If you are using OutSystems UI patterns such as Popover or Dropdown, you can modify their behavior using custom JavaScript or CSS to trigger the menu on hover instead of a click. For more examples of hover interactions, you can refer to threads that discuss such approaches, including "[Show the dropdown menu on hover<>https://www.outsystems.com/forums/discussion/65784/show-the-dropdown-menu-on-hover/]" and "[How I can create hover for list<>https://www.outsystems.com/forums/discussion/71038/how-i-can-create-hover-for-list/]".

Lastly, always test this behavior across different devices and browsers to ensure the hover and popover functionality works as expected.