html - 展开子菜单项以适合标题（先右后左）

Question

我有以下结构：

<div class="wrap">
    <div class="menu">
        <div class="item">
            Menu
            <div class="submenu">
                <div class="submenuitem">Submenu</div>
            </div>
        </div>
    </div>
</div>

到目前为止，以下CSS：

div.wrap {
    background: #eee;
    height: 80px;
}

div.menu {
    margin-left: 50px;
    background: #36e;
}

div.item {
    background: #d00;
    color: #fff;
    line-height: 40px;
    padding: 0px 20px;
    font-size: 16px;
    display: inline-block;
    margin-left: 50px;
}

div.item:hover {
    background: #b00;
}

div.submenu {
    display: none;
    background: #0b0;
    height: 40px;
    position: absolute;
    right: 0%;
    top: 50%;
    min-width: 300px;
}

div.item:hover div.submenu {
    display: inline-block;
}

div.submenuitem {
    line-height: 40px;
    padding: 0px 20px;
    background: #b00;
    color: #fff;
    display: inline-block;
}

JSFiddle

我所追求的行为是submenuitem扩展的宽度以适合其文本内容，但它最多可以使用wrap扩展的宽度。它也应该直接位于下方item，除非 的宽度submenuitem大于从其原始位置到 的右端的距离wrap。此后它应该向左扩展，直到它遇到 的左边缘wrap。

正如你所看到的，当我可以通过设置知道从submenuitem的原始位置到右端的距离时，这完全成功，但我想以一种不需要知道该距离的方式来做到这一点。wrapright: 0%; min-width: 300px;submenuitem

在过去的几天里，我一直在尝试制作或找到解决方案，但没有设法接近。甚至可以从纯 CSS 开始吗？

Answer 1

这是你想要的吗？检查这个并让我知道。

http://jsfiddle.net/zmcEC/9/

div.wrap {
    width: 400px;
    background: #eee;
    position: relative;
    height: 80px;
}

div.submenu {
    display: none;
    background: #0b0;
    height: 40px;
    position: absolute;
    right: 0;
    top: 40px;
    left:0;
}