Drop down menu?

HTML-CSS
#1

Hello, all!

I want to create drop-down menu.
My code structure is in react and it is -

<MainNav/>
<MyDropDownMenu/>  |<-- the component we want to customize|
<div><HomeSection/><ExploreSection/>{and etc}</div>

The target - Free-Dropdown-PSDs19

  1. My bar is static positioned

  2. The menu is on the fly. Its parent is the wrapper element(body>wrapper).

  3. When the window is resized it should be under the profile image

  4. When move the mouse out of specific area the menu should close. The area will be little bigger square than the menu.

Thanks for the answers!

#2

css drop-down

#3