展開子菜單項，以適應頭（右則左）

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進行擴展。除非submenuitem的寬度大於從其原始位置到wrap右端的距離，否則它也應直接位於item之下。此後，它應該向左擴展，直至遇到wrap的左邊緣。

正如你可以看到這個完美的成功時，我可以通過submenuitem設置right: 0%; min-width: 300px;知道從submenuitem的原始位置的wrap右端的距離，但我想這樣做是不需要知道的方式那個距離。

我一直在嘗試在過去的幾天裏設計或找到一個解決方案，而且還沒有設法達到任何距離。純粹的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; 
}