横並びのメニューでhover時に下にアコーディオンを表示させたい

質問

右にfloatさせているメニューバーの中の一つの項目において、hover時にその項目の下にアコーディオンを表示させたいのですが、アクティブ状態にするとそれらが高さを持ってしまいメニューバーのデザインも崩れてしまいます。どのようにすればメニューバーの配置を崩さず、特定の項目の下にアコーディオンメニューを表示させれるでしょうか？jQueryのhasClassでactiveクラスを追加/削除して動かしています。

<div class="header-menu">
  <div class="logo">
    <h1><a href="#">LOGO</a></h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a id="accordion" href="#">メニュー2</a></li>
        <ul class="category">
          <li><a href="#">アコーディオン1</a></li>
          <li><a href="#">アコーディオン2</a></li>
        </ul>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
    </ul>
  </div>
</div>

.active{
    display: block;
}

.logo{
    float: left;
}

.menu{
    float: right;
}

.menu ul li{
    display: inline-block;
    text-align: right;
    padding: 28px 10px 0 100px;
}

.category{
    display: none;
}

$(function(){

    $('#accordion').hover(function(){

        if($(this).hasClass('active')){
            $(this).removeClass('active');
            $('.category').slideUp();
        }else{
            $(this).addClass('active');
            $('.category').slideDown();
        }

    });

});