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

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. 下拉菜单
   周围有实心边框，并且是绝对位置。当它出现时，它位于其调用链接下方 1px 处（这使得它看起来像虚线边框和实线边框在同一行）。
3. 最后，下拉列表的每个
4. 项的底部都有一个虚线边框。

Answer 2

他们使用的技巧是在主菜单项（在 :hover 上）放置一个虚线底部边框，并在下拉菜单容器上放置一个左、右和底部实线边框。诀窍是使用绝对定位来定位它们，使它们达到像素完美。