下拉菜单：虚线边框和固体边界在一行

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

他们使用的是把在主菜单项的虚线边框底部（上：悬停）诀窍在下拉菜单容器和坚实的左边框，右侧和底部。诀窍在于使用绝对定位来定位它们，使它们像素完美。