hover in child-element not working ..please help me
<!DOCTYPE html> <html> <head> <title></title> <style> *{ margin: 0; } .individual { display: inline-block; } ul li { list-style: none } .parent-element { border: 2px solid black; } .child-element { display: none; } /* hover drop down */ .parent-elemet:hover .child-element { display: block; } </style> </head> <body> <div class="container"> <div class="dropdown-started"> <div class="individual"> <ul> <div class="parent-element"> <li>test 1</li> </div> <div class="child-element"> <ul> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> </ul> </div> </ul> </div> <div class="individual"> <ul> <div class="parent-element"> <li>test 1</li> </div> <div class="child-element"> <ul> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> </ul> </div> </ul> </div> <div class="individual"> <ul> <div class="parent-element"> <li>test 1</li> </div> <div class="child-element"> <ul> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> </ul> </div> </ul> </div> <div class="individual"> <ul> <div class="parent-element"> <li>test 1</li> </div> <div class="child-element"> <ul> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> <li> part 1</li> </ul> </div> </ul> </div> </div> </div> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
