css - 下拉菜单 : dotted border and solid border in one line

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 个主要链接(浏览、仪表板、上传和帮助)创建了一种样式，在顶部、右侧、左侧具有实线边框，在底部具有虚线边框。然后，他们将此元素设置为 position: relative 并赋予其比其下拉菜单更高的 z-index。
2. 下拉菜单 <ul>周围有实线边框并且是绝对位置。当它出现时，它位于其调用链接下方 1 像素处(这使它看起来像虚线和实线边框在同一行上)。
3. 最后每个 <li>下拉菜单项底部有虚线边框。