0
我有一个网站,我一直在尝试开发,并且网站的一部分是开发一个滑动菜单,当鼠标悬停时会水平滑动。我开始默认菜单被完全扩展,以便实时开发。Zindex无法正常工作
对于目视参考,我试图达到这样的事:
|--------------|_____________
|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">
• Home
</div>
<div class="sidebarLi">
<div class="slideMenu">
• Projects
<div class="menuItem">
menuItem1
</div>
</div>
</div>
<div class="sidebarLi">
• Resume
</div>
<div class="sidebarLi">
• Contact
</div>
</div>
<div style="background:#1D1D1D; position: relative; width:1000px; height: 1000px;">
Lorem
</div>
</body>
</html>
不过,虽然我不能上传图片,解析该文件将告诉你menuItem只显示一部分,即使Z值表示带有文本“菜单项”的div将在最上面。究竟发生了什么问题?
我重写隐藏的属性与可见的.menuItem类 – QuestionBansAreStupid
这不是它是如何工作的。父容器具有'overflow:hidden',所以任何溢出该容器的东西都将被隐藏。在子元素上设置“overflow:visible”只是意味着任何溢出小容器的东西都可见。父容器仍然隐藏了一切。 – ash
使父级溢出可见只是使菜单容器有一个滚动条,它不会从容器中挤出菜单。 – QuestionBansAreStupid