jquery - 带有垂直子菜单的全宽水平菜单，其中有一个垂直子菜单

Question

我需要一些代码或开源，我需要这种菜单:

菜单 1:

菜单 2:

菜单 1 的图像是主导航中的子菜单，

菜单 2 的图像是垂直的，如果子菜单的长度超过一列(定义为图像上的高度)，它将转到第二列，子菜单的进一步子菜单向右移动替换“评论...”，如图所示。

定义的宽度为 960px。 (无响应)

这是代码最少的 fiddle :http://jsfiddle.net/jVfB9/

HTML:

<div id="pageMenu">

    <div id="pageMenuWrapper">
        <a href="index.html" class="pageMenuLink pageMenuLinkSelected">Menu1</a>
        <a href="index.html" class="pageMenuLink">Menu2</a>
        <a href="index.html" class="pageMenuLink">Menu3</a>
    </div>

</div>

CSS:

#pageMenu{
    position:relative;
    width:960px;
    height:100px;
    margin:auto;
    }
#pageMenuWrapper{
    position:absolute;
    top:0px;
    left:0px;
    height:88px;
    }
.pageMenuLink{
    float:left;
    font-family: 'ProximaNova';
    font-size:16px;
    display:block;
    padding:2px 6px;
    color:#000;
    text-decoration:none;
    line-height:30px;
    text-align:center;
    }
.pageMenuLink:hover{
    background-color:#D8DBE1;
    }
.pageMenuLinkSelected{
    background-color:#d8dbe1;
    }

Answer 1

这是我自己的问题的解决方案，花了一段时间，但我解决了:

这是我的 Fiddle Link

但我被困在这一点上，我必须在悬停子菜单元素时保持父菜单元素处于事件状态。

我确实尝试了以下 CSS 格式

.parent-menu > li > a{
hover style;
}

但这并没有帮助。

谁能建议我一个可能的解决方案？

谢谢:)