I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by default.
Here's an example of what I'm aiming for:
|--------------|_____________
|Menu 1 >|Menu 1 item 1|
|Menu 2 .|Menu 1 item 2|
|Menu 3 .|Menu 1 item 3|
|______________|_____________|
This is the code I have so far:
<!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>
But despite setting the Z value correctly, when viewing the document you'll notice that 'menu Item 1' is not fully displayed. What could be causing this issue?