Try converting both your buttons into a single custom component. You can then give the component two states - one where the dropdown is hidden, and the other where it's visible. Once this is done, you can use the interactions HUD to show the dropdown when you roll over the component and hide the dropdown when you roll out.
Here are the basic steps:
1. Select you buttons.
2. In the HUD, choose Convert to Component > Custom / Generic Component.
3. Double click on the new component to edit it.
4. Duplicate the state, and make the changes in each state so that the dropdown is only visible in one state. You might want to also rename the states (double click their names in the states panel).
5. Double click outside the component to leave edit in place.
6. With your component selected, set up interactions to transition between the two states on roll over / roll out.
7. Run your project and check that it works.
Once you've done this, you can tweak the transition between the two states in the timelines panel.
Thanks for the response Matt but my dropdown has three states. The third being a rollover for menu item in the dropdown. I'm having difficulties with the custom interactions.
Can you please explain yourself better? This can be of many reasons..
You should be able to solve this via nested components. Think of it this way: your overall dropdown/button only has two states: dropdown visible, and dropdown invisible. Then within the dropdown, each menu item has two states: normal, and rollover.
You can crease the overall dropdown/button widget as a "Custom/Generic Component" the way Matt described earlier. The dropdown menu itself can either be a Data List, or a vertical stack of Button controls. In either case, you can double-click this control to drill down and edit the appearance for the rollover state.
Does that make sense?