Search code examples
javascripthtmlcssdrop-down-menunavbar

Navbar drop-down menu problem when hovered upon

I created a navbar having a drop down menu displayed when the button is hovered upon. This is the codepen: https://codepen.io/sahxil/pen/qBoVgXg

I have four problems with the navbar. If you look at the codepen and hover over Solutions:

  1. You can see that the navbar gets displaced i.e. The other buttons shift towards the bottom.
  2. A normal drop-down(triggered by mouseover) should collapse when the cursor no longer hovers over the nav button right? but it does not collapse. It collapses only the second time it is hovered upon.(See the codepen for more clarity).
  3. The Nav Buttons when hovered upon get a red underline just below them having width of 30%, however, with buttons having a drop down, the underline is displaced(as you can see when you hover over Solutions.

Apart from this, another problem is that the button with drop-down menus are taking more width in the navbar even when they are not hovered on.

How do I fix this?

Solution

    1. Use #navbar {align-items: flex-start} to tell flexbox to align your items correctly: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    2. Use mouseout as a companion to mouseover. Like mouseover, it also works on child elements. https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event

    3. Set position: relative on the parent element (div.select-btn). The reason this is happening is because your parent element is positioned as static. See this for an explanation of why that matters: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block

    4. I assume that by "button" you mean anchor elements? I don't see any actual button elements in your code. If you're finding that the spacing is too wide, then try adjusting justify-content on either section#header and/or on ul#navbar