css - 内联 block nowrap 调整大小问题

Question

我一直在尝试使用 CSS 进行 nowrap 导航，但是当我将鼠标悬停在父列表上时，由于缺少更好的描述跳转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>

我把它添加到下面的 fiddle 中

https://jsfiddle.net/23e5aLp2/

我最初是用 float 完成的，但是由于阅读更多，我发现内联 block 是更好的选择，问题是正如我提到的，当鼠标悬停在下拉菜单上时，父列表似乎会跳转

Answer 1

让你的<ul> .interact 内部绝对定位，例如:

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

希望这对您有所帮助!