Show the dropdown menu on hover
Application Type
Traditional Web
Platform Version
11.9.1 (Build 20359)

Good Day, 

           I have a dropdown menu, currently upon clicking the dropdown arrow or the menu, the dropdown content will show, now what i wanted to do is upon hovering the dropdown arrow or the menu the dropdown will show, i'm having a hard time making it work. I'm a newbie in outsystems. Hope somebody could help me or enlighten me about this.

Thanks in advance!


-Laurence


mvp_badge
MVP
Solution

Hi Laurence,

Please try by defining the below mentioned CSS definition in the respective Screen Style Sheet section 

.Menu_DropDownButton:hover .Menu_DropDownPanel {
    display: block;
}

See this sample app - Dropdown Menu Demo

Hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith,

     Thanks for the reply, I'll try your answer :) Thanks :)


-Laurence

mvp_badge
MVP

You're most welcome, Laurence :)

Glad to help you :)


Kind regards,

Benjith Sam

Hi @Benjith Sam,

      I was able to make it work like the way i did on hover, however when i hover on other menu without dropdown it seems that it is getting bigger and having a space in its right side.  I attached a sample image. 


Thank you!


-Laurence

mvp_badge
MVP

Hi Laurence, 

Sorry for the late reply.. I'm unable to reproduce the issue - If possible could you please share a sample .oml file with the mentioned issue?


Kind regards,

Benjith Sam

can you upload demo ?

mvp_badge
MVP

Hi Andrew,

Sure. Check the attached .oml sample file.


I hope this helps you!


Kind regards,

Benjith Sam

SampleAppDropdownMenuOnHover.oml

i need when i hover by the moue on the title (Hover the Dropdown Menu ) drop should open 

can edit the issue like at the attachment oml 

menu1.oml

mvp_badge
MVP

Hi Andrew,

You missed to define the hover css definitnion in the respective screen StyleSheet section

Refer to the attached updated .oml file


Kind regards,

Benjith Sam

menu1.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.