Question 211110 in Html Question posted in
Some basic documentation can be found here.

Html – How can I show and hide sub-menu in Header using css? (with example)

I am trying to make a header that contains menu with sub-menu

If the user hovers one of menu in the header, the sub-menu should be opened below of it.

Here is the example I have recreated.

The problem is when one of the menu gets hovered, rest of sub-menu is also appeared as well.

How can I make only one sub-menu opened that belongs to the menu gets hovered using css?

Tags:

2

Answers


  1. 0

    edit: just move overflow:hidden from the class .menu to .sub-menu

    check my sandbox

    Login or Signup to reply.
  2. 0

    Checkout this sendbox – https://codesandbox.io/s/heuristic-panna-qhwp2r

    You can update your CSS slightly as shown below

    & .menu {
      overflow: hidden;
      min-width: 100px;
      & .menu-list {
        background: red;
        position: relative;
        & .sub-menu {
          background: skyblue;
          clear: both;
          max-height: 0px;
          transition: max-height 0.4s ease-out;
          display: none;
        }
        &:hover .sub-menu {
          max-height: 240px;
          display: block;
        }
      }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search