2013-04-24 42 views
3

我有以下結構:展開子菜單項,以適應頭(右則左)

<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甚至有可能開始?

回答

0

這是你想要的東西嗎?檢查一下,讓我知道。

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; 
} 
+0

沒有,在我的jsfiddle的行爲正是我希望發生的。問題在於它需要知道'wrap'('min-width:300px;')的初始位置和右邊緣之間的距離,這在實際實現中並不是我所知道的。 – Insensus 2013-04-24 17:06:48

+0

chk這一個 http://jsfiddle.net/zmcEC/11/ – 2013-04-24 17:15:50

+0

當它遇到我的右邊緣時不向左擴展。它爲你做,還是你不檢查你的代碼? – Insensus 2013-04-24 17:21:07