html - 下拉导航菜单重叠

Question

我正在创建一个下拉导航菜单，但只有在“下拉菜单”是水平的地方才垂直。问题是我基本上有 4 个 100x100 像素的正方形，我希望子菜单在鼠标悬停在右侧时打开。使用此代码我可以工作，除了新的子菜单与原始正方形重叠。如果位置不是绝对的，即使所有内容都向左浮动，子菜单也会向下展开。我已经尝试了几个小时的一切，并在每个 Angular 落都进行了谷歌搜索，但我就是无法让它发挥作用。我如何才能使子菜单扩展到右侧，与下一个菜单有 5 像素的边距？

#nav {
    float:left;
    list-style-type: none;
    height: 540px;
    width: 100px;
    margin:0 auto; 
}

#nav li {
    list-style-type: none;
    display:block;
    float:left;
}

nav ul:after {
    content: ""; clear: both; display: block;
}

#nav ul a {
    display: block;
    width: 100px;
    height: 100px;
    text-decoration: none;
    list-style-type: none;
    border: 1px solid black;
    margin-right: 5px;
    margin-bottom: 5px;
    float:left;
}

#nav ul li:hover > ul{
    display:block;
    text-decoration: none;
    list-style-type: none;
    overflow:hidden;
    position:absolute;
    float:left;
}

#nav ul ul{
    display:none;
    float:left;
}

和 html:

<div id="nav">
    <ul>
        <li>
            <a href="index.html" class="home">
                <img src="#" width="100" height="100" 
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>
        </li>
        <li>
            <a href="#" class="cloud" target="_blank">
                <img src="#" width="100" height="100"
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>

            <ul>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="message" target="_blank" >
                <img src="#" width="100" height="100"
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>
            <ul>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="box" target="_blank">
                <img src="#" width="100" height="100"
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>
            <ul>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

额外的 li 是子菜单按钮。

Answer 1

尝试将此添加到 #nav ul li:hover > ul

left: 115px