隐藏的绝对定位元素在显示时移动内容

Question

我有这个问题，绝对定位元素在显示时移动内容。看小提琴。 （单击“配置文件”并观察导航栏）。

造成这种情况的原因是什么？如何解决？

https://jsfiddle.net/jLgum2p8/1/

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".navbar-profile").click(function(){
        $(".navbar-profile-content").slideToggle(80);
    });
});

＆＃13;

nav {
    width: 100%;
    background-color: #cecece;
}

li {
  list-style: none;
}

nav {
  display: table;
  position: relative;
}

nav .navbar-title {
  width: 10%;
  display: table-cell;
  text-align: left;
}

nav .navbar-site-content {
  width: 80%;
  display: table-cell;
  text-align: center;
}

nav .navbar-site-content li {
  display: inline-block;
}

nav .navbar-profile {
  width: 10%;
  display: table-cell;
  color: #000;
  cursor: pointer;
  text-align: right;
}

nav .navbar-profile-content a {
  display: block;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}

nav .navbar-profile-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="navbar-title">
    <a href="">title</a>
  </div>
  <div class="navbar-site-content">
    <ul>
      <li><a href="">Link1</a></li>
      <li><a href="">Link2</a></li>
      <li><a href="">Link3</a></li>
      <li><a href="">Link4</a></li>
      <li><a href="">Link5</a></li>
      <li><a href="">Link6</a></li>
    </ul>
  </div>
  <div class="navbar-profile">
    <span>Profile</span>
  </div>
  <div class="navbar-profile-content">
    <ul>
      <li><a href="">Link7</a></li>
      <li><a href="">Link8</a></li>
      <li><a href="">Link9</a></li>
      <li><a href="">Link10</a></li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将display: table-cell更改为block

nav .navbar-title {
  width: 10%;
  display: block;
  text-align: left;
}