inline-block nowrap resize issue - css

Question

I have being trying to make a nowrap navigation with CSS however when I hover over the parent list for lack of a better description jumps
HTML
html {
overflow-x: hidden;
}
ul li{
list-style:none;
}
nav{
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
height:40px;
background-color:white;
overflow:hidden;
}
nav .user-nav{
position:absolute;
white-space:nowrap;
}
nav .user-nav > li{
display: inline-block;
margin: 0 10px;
}
nav .user-nav li a{
text-decoration:none;
color:black;
}
nav .user-nav li a:hover{
color:red;
}
nav .user-nav > .interact li{
display:none;
background-color:white;
padding:10px;
}
nav .user-nav > .interact:hover li{
display:block;
}
nav .user-nav > .interact li:hover{
color:red;
}
<nav>
<ul class="user-nav">
<li>Reccent reviews</li>
<li>Reccent addtions</li>
<li class="interact">Login/Register
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</li>
</ul>
</nav>
I added it to a fiddle below
https://jsfiddle.net/23e5aLp2/
I initially done it with a float however since reading a bit more I found inline-block is the better option, the problem is as I mentioned the parent list seems to jump when hover over the drop down menu

Answer 1

Make your <ul> inside of .interact positioned absolute, like:
.interact ul {
position: absolute;
}
.interact ul {
position: absolute;
}
html {
overflow-x: hidden;
}
ul li{
list-style:none;
}
nav{
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
height:40px;
background-color:white;
overflow:hidden;
}
nav .user-nav{
position:absolute;
white-space:nowrap;
}
nav .user-nav > li{
display: inline-block;
margin: 0 10px;
}
nav .user-nav li a{
text-decoration:none;
color:black;
}
nav .user-nav li a:hover{
color:red;
}
nav .user-nav > .interact li{
display:none;
background-color:white;
padding:10px;
}
nav .user-nav > .interact:hover li{
display:block;
}
nav .user-nav > .interact li:hover{
color:red;
}
<nav>
<ul class="user-nav">
<li>Reccent reviews</li>
<li>Reccent addtions</li>
<li class="interact">Login/Register
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</li>
</ul>
</nav>
Hope this helps!

Answer 2

I would recommend to use inline-table or inline-block for class nav .user-nav li
Fiddle

Answer 3

Its because the list items are block elements, thus making the container bigger in size when they spawn in. Make the dropdown items absolute and your problem will be solved.
http://prntscr.com/ddn5xe
http://prntscr.com/ddn5gv
As for the nav question; a text-align: justify solution might work, or a flexbox solution. Try googling around for "nav justify text" or "nav flexbox" and you'll find a pletora of solutions.

Answer 4

Actually what is happening is that the inline block works well if you add same content in all inline block elements but as they are block elements their default settings will wrap the div around the content inside it. To make sure the content is aligned correctly in line, you need to specifically assign content alignment properties in the css of the inline-block elements.
The simplest solution in your scenario is just add vertical-align:top; to the nav .user-nav > li class or the element with the display:inline-block; property and the problem will be resolved.
Hope this helps.