CODEWITHSUNDEEP
htmlcssfirefox
Einstiens Frizz
Einstiens Frizz

Reputation: 21

Firefox: Hovering over button with dropdown immediately hides the dropdown when moving the mouse over to it

I have a fairly typical dropdown markup with the main difference being the container is a button instead of a div, which is what seems to be the main cause of the issue in Firefox. The button contains a list inside it and when I hover over the button the list displays fine. But when I start to move to the dropdown list, the hover on the button deactivates. If I use a DIV element instead of a BUTTON, then it works fine in both browsers. Here's the code I'm using (plnkr: plnkr.co)

<!--Using 'button': does not work in Firefox-->
<button class="button">
   button text: this doesn't work in Firefox but works in Chrome
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       ...
   </ul>
</button>

<!--Switching to 'div': works fine-->
<div class="button">
   switching to DIV: this works as expected
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       ...
   </ul>
</div>

Relevant CSS:

.button {
  position: relative;
}

.button > ul {
  display: none;
  position: absolute;
}

.button:hover > ul {
  top: 100%;
  left: 0;
  display: block;
}

It would be great if someone can help me figure out why this behavior is differs in Chrome and Firefox.

Upvotes: 2

Views: 1299

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

I wouldn't recommend a ul inside a button. So you could do two things to achieve your goal.

1 - List after the button:

<!-- HTML -->
<button class="button">Button</button>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<!-- CSS -->
button+ul {
    display: none;
}
button:hover+ul {
    display: block;
}

This works (check demo), however you won't be able to hover on the ul (which you probably want).

2 - Wrap it inside a div

<!-- HTML -->
<div class="buttonClass">
    <button>Button</button>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>
<!-- CSS -->
.buttonClass>ul {
    display: none;
}
.buttonClass:hover>ul {
    display: block;
}

This way (check demo), you can hover the ul

Upvotes: 1

Related Questions