Is there a way to hide or show an element within a container based on the hover state of another container?
Here is an example of what I have tried so far:
HTML5
<div class="left-menu-container">
<div class="left-menu-inner-container">
<div class="left-menu-item-container">
<a href="AppsDashboard" class="left-menu-link">
<div class="left-menu-item-first">
Find an Application
</div>
</a>
<div class="sub-menu">
<input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
</div>
</div>
</div>
</div>
CSS3
div.left-menu-container {
float: left;
width: 19%;
padding-right: 1%;
}
div.left-menu-inner-container {
width: 100%;
}
div.left-menu-item-container
{
width:100%;
}
div.left-menu-item-first {
width: 93%;
border: 1px solid #999;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
transition: 0.15s ease-in-out;
color: black;
min-height: 26px;
padding-left: 1%;
}
div.left-menu-item-first:hover {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
}
div.left-menu-item-container .sub-menu {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
display: none;
}
div.left-menu-item-first:hover left-menu-item-container.sub-menu {
position:absolute;
width: 80%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
float:left;
display: block;
z-index: 1000;
float: left;
}
Unfortunately, this method does not seem to work as intended. Hovering over the left-menu-item-first div does not reveal the submenu within the left-menu-item-container parent. Is it necessary for them to be direct children for this Pure CSS approach to function properly? While I have already implemented a jQuery solution, I am interested in achieving this effect using solely CSS if possible.