As far as the drop list closing on mouse out, it’s a built-in behavior for the “treat as flyout” option when showing a widget. If you want it to stay visible on mouse out, just set the option to “none”. You’ll have to use some other trigger to hide the list. The easiest way is to use “Page Click” to hide the list if the cursor isn’t over it.
You can tackle the other three issues a few different ways, but it basically breaks down to needing a trigger to reset everything back. Since the dropdown button is a dynamic panel, setting it to “selected,” also sets all the widgets inside of it to “selected” as well. (The same is true for “groups”.) I set the chevron icon to rotate 180° whenever it was selected or unselected.
The trigger I used to “reset” everything was to have the list widget set the dropdown button to “Unselected” whenever it became hidden. That would set the button back to its default styling and rotate the chevron. Having the button to show or hide (toggle) the list onClick will set everything back to default.
You can dynamically move the row of dropdowns by setting up a kind of “cascading trigger.”
Whenever the first dropdown is resized, have it move the second one to its right plus whatever padding you want:
On Resize, move "second dropdown" to [[This.right + 8]]
Then, on the second dropdown, set it to move the third one whenever it is moved, and so on.
Hopefully the example will help clear things up: Dropdown sample.rp (72.3 KB)