CSS單選列表示例

Question

我正在尋找基於單擊的單選列表。而不是普通的下拉列表，我想要一個覆蓋菜單（類似於我們在Facebook上看到的，當我們更改隱私設置時，出現的單個選擇列表）。是基於CSS還是任何代碼示例來創建類似的列表？我發現網上的所有列表都與我們在f/b上看到的懸停列表不同。

謝謝。

事情是這樣的：

Answer 1

它只是彈出一個菜單，使用可以選擇的選項。

如果你使用jQuery它會是這樣的插件 http://plugins.jquery.com/project/selectbox

Answer 2

我無法找到一個非JS-溶液（和JS我使用jQuery分配focus到任意元素這將保持子菜單打開（從好的一面來說，我敢肯定Facebook會使用某種類型的JavaScript來實現它們的實現）

但是，我把一個幾個例子，這些很像Facebook，只是下拉列表，用JavaScript處理程序將focus分配給點擊的元素（以保持子無論鼠標在頁面上的位置如何，菜單都會打開，直到用戶點擊其他地方）。

考慮到這一點，我已經使用了標準的CSS下拉式加價：

<ul> 
    <li><a href="#">Symbol</a> 
     <ul> 
     <li>option 1</li> 
     <li>option 2</li> 
     <li>option 3</li> 
     </ul> 
    </li> 
    <li><a href="#">Symbol</a> 
     <ul> 
     <li>option 1</li> 
     <li>option 2</li> 
     <li>option 3</li> 
     </ul> 
    </li> 
    <li><a href="#">Symbol</a> 
     <ul> 
     <li>option 1</li> 
     <li>option 2</li> 
     <li>option 3</li> 
     </ul> 
    </li> 
    </ul> 

用CSS：

ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0 auto; 
    } 
    ul li { 
    display: inline-block; 
    position: relative; 
    width: 100px; 
    border-bottom: 1px solid #ccc; 
    } 
    ul li ul { 
    display: none; 
    width: 100%; 
    position: absolute; 
    top: 1em; 
    left: 0; 
    } 

    ul li a:hover + ul, 
    ul li a:active + ul, 
    ul li a:focus + ul { 
    display: block; 
    } 

    ul li ul li { 
    border: 0 none transparent; 
    } 

而jQuery的：

$(document).ready(
    function() { 
    $('li a').click(
     function(){ 
     $(this).focus(); 
     }); 
    } 
); 

Demo at JS Bin

請注意，我已經使用了a元素，因爲focus比普通元素更容易分配給錨點，在這種情況下，li元素更容易分配給錨點。然而第二個版本，具有相同的最終結果是具有以下的jQuery實現：

$(document).ready(
    function() { 
    $('li').click(
     function(){ 
     $('li').not(this).removeAttr('tabindex'); 
     $(this).attr('tabindex','-1').focus(); 
     }); 
    } 
); 

Demo at JS Bin。

---

附錄

斯圖尼科爾斯的CSS Play似乎已經實現了這一個純CSS的解決方案（with a gallery），但我還沒有我的工作方式，通過他的CSS怎麼看他做到了。