I'm facing an issue where an absolutely positioned element is causing content to move when it's displayed. You can see the problem in action by clicking on Profile in this fiddle.
Can anyone help me understand what is causing this behavior and how I can fix it?
$(document).ready(function(){
$(".navbar-profile").click(function(){
$(".navbar-profile-content").slideToggle(80);
});
});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%;
}<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>