inline-block nowrap resize issue

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><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 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><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!

inline-block nowrap resize issue

Sign up