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

Answer 2

我会把ul放在你绝对的里面。

position:absolute;

执行此操作时，元素将悬停在li-parent之上。当您尝试使用正边距和负边距时，您可以将悬停元素放在它旁边。它将是这样的：

#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}

在CSS中创建垂直“下拉”下拉菜单

2 个答案: