0
Students
The dropdown menu is probably the most frequent element in the layout. It's a really handy concept, allowing you to fit a lot of different items into a small space and separate the sub-items logically.
In this exercise, you've got a layout of a menu with a dropdown submenu. But its functionality leaves much to be desired.
Your task is to complete the missing selector styles:
- .sub-menu
- .nav li
- .nav li:hover > .sub-menu
How does the dropdown menu work?
- In its initial state, all submenus are hidden
- A submenu should appear when you hover over a menu item
Examples
Initial state
Hover on the second menu item
Tips
- You can see the final results in the three states in the __tests_/_image_snapshots__
- Use the
display
property with values none and block
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.