0

I am working on a navigation bar for my react app and having problem displaying a drop-down menu under the navigation bar. I would like to have the drop-down menu to slide from the top but not covering the navigation bar in the progress. I have my components structured as follow:

My NavBar component is specified with position fixed and a high enough z-index

<header>
   <nav className={classes.NavBar}>
      <NavItems />
   </nav>
</header>

NavItems contains a number of individual navigation items, the Dropdown component will show the drop-down menu when it is hovered

<NavItem link="/" exact="true">Home</NavItem>
<NavItem link="/destinations">Destinations</NavItem>
<NavItem link="/services">Services</NavItem>
<Dropdown label="My Trips">
   <DropdownItem link="/manage-booking">Manage Booking</DropdownItem>
   <DropdownItem link="/enquire">Enquire</DropdownItem>
</Dropdown>
<NavItem link="/about-us">About Us</NavItem>

My Dropdown component contains DropdownContent class which I want it to be under the NavBar

<ul className={classes.Dropdown}>
   {label}
   <div className={classes.DropdownContent}>
      {children}
   </div>
</ul>

I have known that setting low z-index for DropdownContent would not work since it has transform CSS property that set itself on a different stacking context. So, is there a way to place DropdownContent class under Navbar like in this case?

Minh Mai
  • 35
  • 7
  • 1
    related: https://stackoverflow.com/q/54897916/8620333 (you may find your answer at the very end of the accepted answer) – Temani Afif May 10 '20 at 12:57
  • Great answer there! Thanks @TemaniAfif. Got my problem solve and I also got to understand z-index better. Very clear explanation! – Minh Mai May 11 '20 at 01:48
  • good ;) I will then close the question as duplicate since you find what you needed there – Temani Afif May 11 '20 at 10:34

0 Answers0