标题导航栏错误

Question

我正在编写一个响应式导航栏，它会变成一个宽度低于某个宽度的汉堡菜单，但是当我尝试打开下拉菜单时，它会全部跳回到页面顶部而不是保留在我的任何位置这页纸。 对不起，这很难描述，但确实找到下面的所有代码，如果你能看到问题是什么，请告诉我。 提前谢谢大家：

    $('#burger_menu').click(function() {
      $('header ul').css('display', 'block');
      $('header ul').mouseleave(function() {
        $('header ul').css('display', 'none');
      });
    });

    header {
      width: 100%;
      background: #62c2d2;
      position: fixed;
      top: 0;
      z-index: 20;
    }
    
    header #logo {
      width: 300px;
      height: 40px;
      margin: 15px;
      background: url('../img/new-logo.png')center no-repeat;
      background-size: cover;
      float: left;
    }
    
    header nav {
      padding: 10px 15px;
      float: right;
    }
    
    header nav #burger_menu {
      padding-right: 20px;
      font-size: 40px;
      display: none;
      color: #fff;
    }
    
    header nav #burger_menu:visited {
      color: #fff;
    }
    
    header nav #burger_menu:hover {
      color: #eee;
    }
    
    header nav #burger_menu:active {
      color: #fff;
    }
    
    header nav ul {
      display: block;
    }
    
    header nav li {
      padding: 10px;
      display: inline-block;
      float: left;
    }
    
    header nav a {
      width: fit-content;
      font-size: 18px;
      color: #fff;
      text-decoration: none;
      position: relative;
    }
    
    @media screen and (max-width: 1023px) {
      /* NAV */
      header nav #burger_menu {
        display: inline-block;
      }
    
      header nav ul,
      nav:active ul {
        display: none;
        position: absolute;
        padding: 20px 40px;
        background: #62c2d2;
        right: 0;
        top: 80px;
        width: 30%;
      }
    
      header nav li {
        width: 100%;
        text-align: center;
        padding: 15px;
        margin: 0;
      }
    }

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
      <!-- left -->
      <a href="index.html" id="logo"></a>
      <!-- right -->
      <nav>
        <a href="#" id="burger_menu"><i class="fa fa-bars"></i></a>
        <ul>
          <li>
            <a href="index.html" class="active"><span class="active">home</span></a>
          </li>
          <li>
            <a href="about.html"><span>about</span></a>
          </li>
          <li>
            <a href="animation.html"><span>careers</span></a>
          </li>
          <li>
            <a href="brand.html"><span>contact</span></a>
          </li>
        </ul>
      </nav>
    </header>