CSS嵌套的菜单系统悬停事件

Question

这是我的CodePen：http://codepen.io/ScottBeeson/pen/rxquJ

所以基本上当你将鼠标悬停在实体上时，菜单会向上滑动。我试图为每个菜单项创建一个子菜单，它基本上反映了菜单功能，但是从菜单底部向下滑动。这是一个应该是什么样子的图像：

这是我目前的HTML：

<div class="entity">
  <span class="menu"><div>A</div><div>B</div><div>C</div></span>
</div>

我可以想到使用JQuery的几种方法，但我想知道它是否可以用于CSS。显然，填充菜单将通过javascript，但我尝试尽可能多地使用CSS。所以把它置于问题形式：如果我把一个静态div与一个＆＃34;子菜单＆＃34;在我的实体内部，当我将鼠标悬停在菜单中的div上时，有什么方法可以用CSS / LESS来触发它吗？

Answer 1

我没有使用LESS，所以我无法帮助你。

但是，我创建了这段代码，它显示悬停时的菜单，以及悬停菜单项时的子菜单。您可以为这样的实体设置结构：

<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>

并将其与此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%;
}

我希望你能自己添加流畅的效果。祝你好运。

Ow和DEMO

[编辑]
使用过渡制作（有点草率）动画，检查updated Fiddle。