Dropdown menu closes when I hover the options in Firefox
<p>Im using Jade and CSS for a dropdown menu</p>

<p>here is the jade:</p>

<pre><code>    .dropdown
        button.dropbtn(type="button") Me
          .dropdown-content
            a(href="/favorites") 
              | Favorites
            a(href="/update") 
              | Edit
            a(href="/logout")
              | Logout
</code></pre>

<p>and here is the css:</p>

<pre><code>.dropdown{
  position: relative;
    display: inline-block;
}
.dropdown-content a{
  display: block;
  padding: 8px 0px;
  text-align: justify;
  color: grey;
  text-decoration: none;
}
.dropbtn {
    background: none;
    color: grey;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn:hover {
  transition: all .2s ease-in-out;
    background: none;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown-content{
  display: none;
  position: absolute;
}

.dropbtn:hover .dropdown-content{
  display: block;
}
</code></pre>

<p>This basically makes it so that when you hover over the "me" button
the dropdown buttons appear, but when I move down the cursor to select one
they (edit: they meaning the dropdown menu options that appear on hover) immediately disappear. </p>

<p>Seems like this doesn't work in Firefox but does in Chrome. </p>

<p>edit:
turns out I needed to change the jade to the following (thanks to  Kai Hao for the help):</p>

<pre><code>      .dropdown
        .dropbtn
          | Me
          .dropdown-content
            a(href='/favorites')
              | Favorites
            a(href='/update')
              | Edit
            a(href='/logout') 
              | Logout
</code></pre>