使絕對定位的兒童沒有用完視口的邊界

假設我們有一個水平的下拉菜單，像這樣的結構：使絕對定位的兒童沒有用完視口的邊界

<ul class="root"> 
    <li class="root-item"> 
    <ul class="submenu"> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
    ... 
    <li class="root-item"> 
    <ul class="submenu"> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
</ul>

的CSS大致是這樣的：

.root-item{ 
    position:relative; 
    display:inline-block; 
} 
.submenu{ 
    position:absolute; 
    top:-1000px; 
} 
.root-item:hover .submenu{ 
    top:100%; 
}

的priblem這裏是：如果一些（比如，最後）.submenu足夠寬，則可能走出.root國界的，最終出來的視口（如果.root的寬度是VP的100％）。

我想正在.submenu-S配入.root什麼;這意味着離開和右.sumbenu的不會得到否定的。但是 - 與純粹的css，只是很好奇，如果有可能在這裏跳過使用javascript。期望的結果就像ribbon menu here。那可能嗎？

謝謝！

來源

2013-08-21 bonflash

這個怎麼樣？

http://codepen.io/MisterGrumpyPants/pen/IwfDC

除了一些邊框和背景，以充實的外觀，都讓我加入到你的CSS是兩類子菜單：一個是對齊到其父項的左邊和右邊延伸（「向右「），而另一個向右對齊並向左延伸（」向左「）。

這是一個簡單的解決方案，如果您知道哪個子菜單將需要延長左，這樣可以延長的權利，你可以控制你的子菜單中的類，應該工作。

（如果你需要更復雜的東西（比如你不希望有應用「向右」和「向左」類自己），這將需要一些更多的思考。）

UPDATE

這裏的另一個筆，其利用:nth-child選擇器，以確定哪一種方式的子菜單波動，而不是手動施加「向右」和「向左」類名：

http://codepen.io/MisterGrumpyPants/pen/ovJcH

來源

2013-08-31 00:05:10 davidtheclark

感謝您的回覆！有一兩件事，那複雜了一切：在項目的數量和（尤其是）submenues大小變化的動態菜單的情況下，我們不能預先知道，哪個項目_TO-right_和_TO-left_類應被應用於。 – bonflash

您可以爲您的子菜單設置最大寬度，然後您將能夠確切知道它們中有多少可以正確延伸，然後才能開始向左延伸。但是，如果你想要的是一個完全動態的，不受管制的寬度和行爲，基於這個寬度，我認爲你必須使用JavaScript。 CSS無法知道你需要知道什麼。 – davidtheclark

另外 - 你看過「：nth-child」版本嗎？因爲這不需要手動應用類，所以只需要知道有多少物品可以正確擴展，然後才能開始向左擴展。可能有幫助。 – davidtheclark

使絕對定位的兒童沒有用完視口的邊界

回答

相關問題