Html: Drop Down Menu

CSS: Positioning
Last update: 17 Jul 23:20
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

Final One

Hover on the second menu item

Final Hover

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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests