CSS Question
inline-block nowrap resize issue
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><a href="">Reccent reviews</a></li>
<li><a href="">Reccent addtions</a></li>
<li class="interact"><a href="">Login/Register</a>
<ul>
<li><a href="">Login</a></li>
<li><a href="">Register</a></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 Source
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><a href="">Reccent reviews</a></li>
<li><a href="">Reccent addtions</a></li>
<li class="interact"><a href="">Login/Register</a>
<ul>
<li><a href="">Login</a></li>
<li><a href="">Register</a></li>
</ul>
</li>
</ul>
</nav>Hope this helps!