下拉菜单：一行中的虚线边框和实线边框

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个主要链接（浏览，仪表板，上传和帮助）创建了一个样式，其顶部，右侧，左侧和底部带有虚线边框。然后他们将这个元素定位：relative并给它一个比其下拉菜单更高的z-index。
2. 下拉菜单<ul>周围有一个实线边框，位置绝对。当它出现时，它在其调用链接下定位1px（这使得它看起来像点线和实心边框在同一行上）。
3. 最后，下拉列表中的每个<li>项目底部都有一个虚线边框。

Answer 2

他们使用的技巧是在主菜单项（on：hover）上放置一个虚线边框底部，在下拉菜单容器中放置一个实心边框 - 左，右和底部。诀窍在于使用绝对定位来定位它们，使它们完美无缺。