html - 在 CSS 中创建垂直 "drop"向下菜单

Question

标题可能没有正确描述问题。我想为我的网站创建一个菜单，它是左侧的垂直菜单，当您将鼠标悬停在带有子选项的选项上时，这些子选项会弹出到侧面(目前并不重要)。我遇到的问题是，当他们弹出时，他们会按下所有其他选项，我得到的导航栏看起来一点也不好。如果有人可以帮我解决这个问题，这样我就不会把其他所有东西都推开，即使它们没有重叠，我们将不胜感激。

我使用的 HTML。

<ul id="nav">

<li><a href="#">Work</a></li>
    <li><a href="#">Imaging</a>
    <ul>
        <li><a href="#">Photoshop</a>
            <ul>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </li>
        <li><a href="#">Illustrator</a></li>
    </ul>
</li>
<li><a href="#">Home</a></li>

我使用的 CSS。

ul {
list-style-type:none;
margin:0;
padding:0;
}

a {
display:block;
width:60px;
}

#nav ul {
    display: none;
}

#nav li:hover > ul {
    display: block;
    position: relative;
    float: left;
}

如果有人可以帮助我，请提前致谢。

Answer 1

那是因为您的文档将所有元素排成一行，并且总是一个接一个地显示它们!

所以我给你的建议是只使用

position: absolute;

这样您就可以在文档上对齐元素，而不会影响当前的文档样式和元素对齐方式!

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/position