下拉菜單：虛線邊框和固體邊界在一行

Question

如何使用CSS來製作，在下拉菜單中選擇此網站一條線，虛線邊框和實線邊框，

http://blip.tv/

這裏像我強調，我上面的意思行，

這裏是我不令而行像上面的下拉菜單中的鏈接。我得到的是一個完整的邊框或虛線邊框，我不能讓它們都像上面的網站那樣動態。

http://quack-project.net/tmp/list_2.htm

的CSS的一些抽象，

/* drop down menu local level 1 */ 

#footer > ul > li { 
    float:left; 
    margin:0px 15px 0px 0px; 
    } 

#footer > ul > li > a { 
    padding: 4px 8px 4px 0px; 
    list-style-type:disc; 
    list-style-position:inside; 
    display:list-item; 
    text-decoration:none; 
    color:#ffffff; 
    border:0px solid #0066FF; 
    } 

#footer > ul > li > a:hover { 
    color:#000000; 
    border-top: 1px solid #000; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
    } 

/* drop down menu local level 2 */ 

#footer > ul > li > ul{ 
    display:none; 
    position: absolute; 
    border: 1px solid #000; 
    min-width:200px; 
    } 

#footer > ul > li > ul > li { 
    float: none; 
    } 

#footer > ul > li > ul > li > a { 
    padding:4px 15px 4px 15px; 
    } 

#footer > ul > li:hover ul , 
#footer > ul > li.hover ul { 
    display: block; 
    } 

#footer > ul > li:hover li > a, 
#footer > ul > li.hover li > a { 
    background-color: #b8b2b2; 
    border-bottom: 1px solid #ffffff; 
    color: #000000; 
    /*width:200px; use a fixed width to fix IE if use 'position: relative' on all <li>*/ 
    } 

#footer > ul > li > ul > li > a:hover { 
    color:#000000; 
    background-color:#cccccc; 
    } 

是它的一些技巧在JavaScript或使用的圖像？

千恩萬謝 劉

Answer 1

blip.tv創建效果的方式是通過執行以下操作：

1. 創建一個樣式是對頂部實線邊框的4個大環節（瀏覽，儀表盤，上傳和幫助），右，在底部留下一個虛線的邊界。然後，他們創建了這個元素的位置：相對，並給它一個比下拉菜單更高的z-index。
2. 下拉菜單<ul>在它周圍有一個堅實的邊框，並且是絕對位置。當它出現時，它位於其調用鏈接下的1px（這使得它看起來像虛線和實心邊框在同一行上）。
3. 最後，每個<li>下拉菜單項的底部都有一個虛線邊框。

Answer 2

他們使用的是把在主菜單項的虛線邊框底部（上：懸停）訣竅在下拉菜單容器和堅實的左邊框，右側和底部。訣竅在於使用絕對定位來定位它們，使它們像素完美。