Dropdown menu javascript function

Question

I have a dropdown menu. It consists of 3 buttons ontop of eachother so only the main button is visible. When you hover over the main button saying Raffles it will make the button move upwards. Then 1 of the other 3 buttons moves down and the last one stays still. This creates a compact dropdown menu. It works perfectly except for 1 problem. I have it set to that when you hover each one it will shift them into the positions the need to be. The problem is that when I start to hover over a different button (after they have shifted) they all start to shift again because I stop hovering over 1 button and start hovering over the next button. How can I prevent this from happening?

var dropdown = function() {
    $('.inbutton, .dr1button, dr2button').hover(function() {
        $('.inbutton').animate({
            top: '-183px'
        }, 200);
        $('.dr2button').animate({
            top: '0px'
        }, 200);
    }, function() {
        $('.inbutton').animate({
            top: '-122px'
        }, 200);
        $('.dr2button').animate({
            top: '-61px'
        }, 200);
    });
};


$(document).ready(dropdown);

p.button {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    transition: height 0.2s ease;
}

p.button:hover {
    height: 110%;
    border-bottom: 0px;
    cursor: pointer;
}

p.dbutton {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    vertical-align: middle;
    line-height: 30.5px;
    text-align: center;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    transition: height 0.2s ease;
}

p.dbutton:hover {
    height: 110%;
    border-bottom: 0px;
    cursor: pointer;
}

p.inbutton {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    top: -122px;
    z-index: 98;
}

p.inbutton:hover {
    border-bottom: 0px;
    cursor: pointer;
}

p.dr1button {
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    height: 100%;
    width: 144px;
    position: relative;
    z-index: 97;
    transition: background-color 0.2s ease;
}

p.dr1button:hover {
    background-color: #585858;
    cursor: pointer;
}

p.dr2button {
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    height: 100%;
    width: 144px;
    position: relative;
    top: -61px;
    z-index: 98;
    transition: background-color 0.2s ease;
}

p.dr2button:hover {
    background-color: #585858;
    cursor: pointer;
}

div.navbardivider {
    height: 61px;
    width: 1px;
    background-color: #424242;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    float: left;
}

div.dropdown {
    width: 144px;
    float: left;
}

div.divider:hover {
    cursor: pointer;

<div id="buttons">
  <!--Home button-->
  <a href="/"><p class="button">- Home</p></a>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Raffles Button-->
  <div class="dropdown">
    <a href="/raffles.php">
      <p class="dr1button">Open</p>
    </a>
    <a href="/clraffles.php">
      <p class="dr2button">Closed</p>
    </a>
    <p class="inbutton">Raffles</p>
  </div>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Get tokens Button-->
  <a href="/gettokens.php"><p class="dbutton">Get<br>Tokens</p></a>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Token lotto Button-->
  <a href="/lotto.php"><p class="dbutton">Token<br>Lotto</p></a>
</div>

Answer 1

Your problem is here:

$('.inbutton, .dr1button, dr2button').hover

You have a couple of problems. By triggering on the button individually you mouse out of one, before mousing over the other. It triggers the close before the reopen. This causes the bouncing effect. Also you are missing the "." in front of dr2button so it's not triggering the hover effect at all.

I'd use the wrapper instead:

$('.dropdown').hover

This way once you mouse over the dropdown it stays open until you mouse out. check out this fiddle: http://jsfiddle.net/r5Lyga84/