html - CSS - 如何让元素相互重叠？ (没有边距/填充等)

Question

我正在制作一个导航栏，我希望它有纯 CSS 下拉菜单，问题是为了使它们不与页面的其余部分重叠，您必须将它们设置为 位置: absolute，但是这会导致所有链接占用相同的空间。给它们单独的边距会将它们隔开，但由于它们占据相同的虚拟空间，只有最后一个链接实际上是可点击的。

HTML:

    <div id="navbar">
        <ul>
            <a href="index.html" class="navbutton" id="navbuttonselected">Home</a>
            <a href="about.html" class="navbutton">About Me</a>
            <div id="programs">
                <a href="programs.html" class="navbutton">Programs</a>
                    <li><a class="navbutton" style="margin-top:0px;">Test</a></li>
                    <li><a class="navbutton" style="margin-top:62px;">Test 2</a></li>
                    <li><a class="navbutton" style="margin-top:124px;">Test 3</a></li>
                    <li><a class="navbutton" style="margin-top:186px;">Test 4</a></li>
            </div>
        </ul>
    </div>

CSS:

#navbar
{
    border-bottom: 1px solid #00A2E8;
}

.navbutton
{
    color: #BBBBBB;
    text-align: center;
    font-size: 18px;
    display: inline-block;
    width: 120px;
    height: 45px;
    padding-top: 17px;
    transition: all 0.3s;
    position: relative;
}

#programs
{
    display: inline-block;
}

#programs > li
{
    display: none;
    list-style-type: none;
}

#programs:hover > li
{
    display: block;
    position: absolute;
}

有什么办法可以让它们相互重叠，这样链接就可以点击但不会将整个页面向下移动吗？最好是没有 JQuery/Javascript 的解决方案。谢谢!

Answer 1

好吧，我想我可能已经解决了这个问题。我所做的只是向 .navbutton 元素添加一个 z-index 为 1 并且它起作用了。所有其他的 css 我根本没有修改。

   .navbutton
{
    color:#BBBBBB;
    text-align:center;
    font-size:18px;
    display:inline-block;
    width:120px;
    height:45px;
    padding-top:17px;
    transition:all 0.3s;
    position:relative;
    z-index: 1; /* this is the rule too add */
}

希望对您有所帮助:-)