Question

我有一个我一直在努力开发的网站，该网站的一部分是开发一个滑动菜单，可以在鼠标悬停时水平滑动。我开始默认菜单是完全扩展的，这样可以更容易实时开发。

为了视觉参考，我试图达到这样的目的：

|--------------|_____________
|Menu 1       >|Menu 1 item 1|
|Menu 2       .|Menu 1 item 2|
|Menu 3       .|Menu 1 item 3|
|______________|_____________|

我的代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
@charset "utf-8";
/* CSS Document */

#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    background: #151515;
    width: 250px;
    height: 100%;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
    transition: 0.5s;

}

#sidebarInfo{
    margin: 0px,5px,10px,5px;
    color: #7E7E7E;
    width: 100%;
    height: 50px;
    position: relative;
    font-family: allerta, sans-serif;
    font-size: 9.5px;
    top: 70%;
    align-content: center;
    display:flex;
    justify-content:center;
    align-items:center;
}

.sidebarLi{
    position: relative;
    margin: 10px;
    font-size: 28px;
    color: aliceblue;
    width: 100%;
    font-family: allerta, sans-serif;
}

.slideMenu{
    position:relative;
    transition:0.4s;

}
.menuItem{
    position:relative;
    transition: 0.4s;
    width: 150px;
    height: 30px;
    overflow-x: visible;
    overflow-y: visible;
    left: 180px;
    z-index: 0;
    color: #000000;
    background: #FFFFFF;
}

</style>

<title>Caduceus Technologies</title>

</head>

<body>
    <div id="sidebar">
        <div class="sidebarLi">
            &nbsp;•&nbsp;Home
        </div>
        <div class="sidebarLi">
            <div class="slideMenu">
                &nbsp;•&nbsp;Projects
                <div class="menuItem">
                    menuItem1
                </div>
            </div>
        </div>
        <div class="sidebarLi">
            &nbsp;•&nbsp;Resume
        </div>
        <div class="sidebarLi">
            &nbsp;•&nbsp;Contact
        </div>
    </div>
    <div style="background:#1D1D1D; position: relative; width:1000px; height: 1000px;">
        Lorem
    </div>
</body>
</html>

但是，虽然我无法上传图像，但解析此文档会向您显示menuItem仅部分显示，即使Z值指示带有文本“menu Item”的div将位于顶部。究竟出了什么问题？

Answer 1

menuItem1部分显示，因为您的包含sidebar div具有固定宽度，并且overflow: hidden隐藏了任何溢出该容器的内容（menuItem1执行此操作）。< / p>

删除overflow: hidden并且它可见（但容器溢出）。

Zindex无法正常工作

1 个答案: