随页面问题滚动的菜单

Question

我有一个继承的菜单，使用javascript和CSS下拉全宽下拉列表。问题是如果页面滚动整个菜单向下移动页面浮动内容。

这是css：

ul.primary-nav {
  position: relative;
  left: 0;
  top: 145px;
  bottom: 0;
  width: 16em;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  background: #ffffff;
}
@media screen and (min-width:  38em) {
  ul.primary-nav {
    position: absolute;
    width: 100%;
    top: 154px;
    bottom: auto;
    z-index: 10;
    background: none;
    transition: none;
  }
  ul.primary-nav li > a {
    font-size: 1.125em;
    text-transform: uppercase;
    letter-spacing: .125em;
    }
  ul.primary-nav .top-level-link i {
    display: none;
    }
}

@media screen and (min-width:  52em) {
  ul.primary-nav {
    top: 160px;
  }
  ul.primary-nav li > a {
    font-size: 1.5em;
  }
}
ul.primary-nav > .container {
  position: static;
  width: 100%;
}
ul.primary-nav li {
  width: 100%;
}
@media screen and (min-width:  38em) {
  ul.primary-nav li {
    display: inline;
    float: left;
    width: 30.555555555555557%;
    margin-left: 1.3888888888888888%;
    margin-right: 1.3888888888888888%;
  }
}

ul.primary-nav > .container {
  position: static;
  width: 100%;
}