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;
}
行爲我之後是submenuitem
的寬度擴大以符合其文本內容,但它最多可以使用寬度wrap
進行擴展。除非submenuitem
的寬度大於從其原始位置到wrap
右端的距離,否則它也應直接位於item
之下。此後,它應該向左擴展,直至遇到wrap
的左邊緣。
正如你可以看到這個完美的成功時,我可以通過submenuitem
設置right: 0%; min-width: 300px;
知道從submenuitem
的原始位置的wrap
右端的距離,但我想這樣做是不需要知道的方式那個距離。
我一直在嘗試在過去的幾天裏設計或找到一個解決方案,而且還沒有設法達到任何距離。純粹的CSS甚至有可能開始?
沒有,在我的jsfiddle的行爲正是我希望發生的。問題在於它需要知道'wrap'('min-width:300px;')的初始位置和右邊緣之間的距離,這在實際實現中並不是我所知道的。 – Insensus 2013-04-24 17:06:48
chk這一個 http://jsfiddle.net/zmcEC/11/ – 2013-04-24 17:15:50
當它遇到我的右邊緣時不向左擴展。它爲你做,還是你不檢查你的代碼? – Insensus 2013-04-24 17:21:07