CSS nested hover events for a menu system [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Here is my CodePen: http://codepen.io/ScottBeeson/pen/rxquJ
So basically when you hover over an entity, a menu slides up. I'm trying to create a submenu for each menu item that basically mirrors the menu functionality, but slides down from the bottom of the menu. Here is an image of what it should look like:
And here is my current HTML:
<div class="entity">
<span class="menu"><div>A</div><div>B</div><div>C</div></span>
</div>
I can think of a couple ways to do this with JQuery, but I'm wondering if it's possible to do with CSS. Obviously, populating the menu will be via javascript, but I'm trying to use CSS as much as possible. So to put it in question form: If I put a static div with a class of "submenu" inside my entity, is there any way with CSS/LESS to trigger it when I hover over a div inside the menu?

Answer 1

I don't use LESS, so I can't help you with that.
However, I made you this code, which displays the menu on hover, and the submenu when you hover the menu items. You could set up the structure for a entity like this:
<div class="entity">
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>C</li>
</ul>
</div>
And combine it with this CSS:
.entity {
margin: 5px;
position: relative;
display: inline-block;
width: 260px;
height: 200px;
background-color: lightblue;
}
.entity ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
background-color: rgb(0,0,0); /*fallback*/
background-color: rgba(0,0,0,.5);
bottom: 0px;
}
.entity li:hover {
background: black;
color: white;
}
.entity:hover > ul { /* only display direct ul child of .entity */
display: block;
}
.entity li {
display: inline-block;
padding: 10px;
}
.entity li > ul {
background: black;
}
.entity li:hover > ul {
display: block;
left: 0;
bottom: -100%;
}
I hope you can add the smooth effects yourself. Good luck.
Ow, and a DEMO
[EDIT]
Made a (bit sloppy though) animation using transitions, check the updated Fiddle.