當靠近窗口邊緣時將子菜單展開到相反方向

Question

我有一個使用css的簡單子菜單，該結構是一個無序列表，並且通過將顯示更改爲「block」來顯示懸停狀態。

<ul> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
    <li> 
     <a href="#">item with submenu</a> 
     <ul class="submenu"> 
      <li><a href="#">item</a></li> 
      <li><a href="#">item</a></li> 
      <li><a href="#">item</a></li> 
     </ul> 
    </li> 
</ul> 

而CSS：

.submenu { 
    display: none; 
    position: absolute; 
} 

ul li:hover>ul.submenu { 
    display: block; 
} 

這裏你可以看到一個例子： http://jsfiddle.net/Y2vgj/

在這裏： http://tinkerbin.com/9TXjbi8c

（其在這兩個環節是相同的）

否w，我試圖做的是當頁面太小而不能完全顯示時，將子菜單展開到另一個方向。任何人都可以幫助我嗎？

Answer 1

爲子菜單li添加以下樣式。

.submenu li { 
    float: none; 
    width: 150px; 
    list-style-type: none; 
    display: inline; 
} 

調整邊距和寬度，使其處於正確的位置。 上述更改將水平顯示它們。