如何在没有js的情况下在页面内容上增加下拉菜单？

Question

我的主页的菜单包括一个下拉菜单。我使用 html、css 和 php，但不使用 js。我无法让下拉菜单不下推页面内容，而是打开内容。您能否看一下并告诉我如何修复代码？预先感谢。

我用 z-index 尝试过，我读过，用这个我可以将一个内容提升到另一个内容之上，就像图层一样，但它似乎没有反应。你能告诉我，这有什么问题吗？

.navbar {
    margin: 0 auto;
    overflow: auto;
    border-top: 5px solid whitesmoke;
    padding-bottom: 15px;
    align-items: start;    
}
.dropdown{
    display: flex;
    flex-direction: column;
}
.dropbtn{
    flex-direction: row;
}
.dropdown .dropdown-content{
    display: none;    
}
.dropdown:hover .dropdown-content a{
    display: flex;
    flex-direction:column;
    text-align: left;
    font-size: 15px;
    z-index: 1000;
}
.dropdown:hover > .dropdown-content{
    display: flex;
    flex-direction: column;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    padding-right: 5px;
    z-index: 1000;
}
.content-container{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-items: center;
    text-align: justify;
    z-index: -1000;
}

<nav class="navbar flex">
    <div class="dropdown">
        <div class="dropbtn"><a href="./admin.php">Serv</a></div>
        <div class="dropdown-content">
            <a href="#">"Meta"</a>
            <a href="#">VA</a>
            <a href="#">Admin</a>
        </div>
    </div>
    <a href="./oktatas.php">Okt</a>
    <a href="./va.php" id="ajanlat">Aj</a>
    <a href="./how.php">About</a>
    <a href="./admin.php">Blog</a>
</nav>

Answer 1

考虑将

position: absolute

应用到下拉菜单。此属性将元素从“正常”布局流中删除，并允许元素覆盖页面上的其他元素：

.navbar {
    margin: 0 auto;
    overflow: auto;
    border-top: 5px solid whitesmoke;
    padding-bottom: 15px;
    align-items: start;    
}
.dropdown{
    display: flex;
    flex-direction: column;
}
.dropbtn{
    flex-direction: row;
}
.dropdown .dropdown-content{
    position: absolute;
    display: none;    
}
.dropdown:hover .dropdown-content a{
    display: flex;
    flex-direction:column;
    text-align: left;
    font-size: 15px;
    z-index: 1000;
}
.dropdown:hover > .dropdown-content{
    display: flex;
    flex-direction: column;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    padding-right: 5px;
    z-index: 1000;
}
.content-container{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-items: center;
    text-align: justify;
    z-index: -1000;
}

<nav class="navbar flex">
    <div class="dropdown">
        <div class="dropbtn"><a href="./admin.php">Serv</a></div>
        <div class="dropdown-content">
            <a href="#">"Meta"</a>
            <a href="#">VA</a>
            <a href="#">Admin</a>
        </div>
    </div>
    <a href="./oktatas.php">Okt</a>
    <a href="./va.php" id="ajanlat">Aj</a>
    <a href="./how.php">About</a>
    <a href="./admin.php">Blog</a>
</nav>

您可以应用更多 CSS 属性来将其放置在您想要的位置。