+ 1

i want that when i hover in drop (class) then i want to display dropdown(class)......please help me

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .drop-down{ display: none; } .drop:hover .drop-down{ display: block; } </style> </head> <body> <div class="conainer"> <div class="drop"> <ul> <li> part 1</li> <ul> </div> <div class="drop-down"> <ul> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> </ul> </div> </div> </body> </html

html css

18th Dec 2020, 8:31 AM

Abhishek Topno

8 Answers

+ 1

Solved check this https://www.w3schools.com/code/tryit.asp?filename=GLSDLCPRP8L8

18th Dec 2020, 2:26 PM

Krish

+ 3

Abhishek Topno Please give an MWE What is MWE? check the link i have given in my 1st answer.

18th Dec 2020, 12:11 PM

Krish

+ 2

Abhishek Topno it isn't working because your list is not a child of the drop div

18th Dec 2020, 9:10 AM

Krish

+ 1

https://www.sololearn.com/post/75089/?ref=app

18th Dec 2020, 9:07 AM

Krish

Good attempt. Please follow this link for example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

18th Dec 2020, 9:08 AM

Chris Coder

Please can you solve my mistake

18th Dec 2020, 9:37 AM

Abhishek Topno

https://code.sololearn.com/WaF45DPFRw2c/?ref=app

18th Dec 2020, 12:44 PM

Abhishek Topno

you could either target sibling elements with '+' operator: .drop:hover + .drop-down or with '~' operator: .drop:hover ~ .drop-down the first one target only the next sibling element, conversely to the second one wich target all next matching elements with same parent/container...

29th Dec 2020, 1:46 PM

visph