drop down menu: dotted border and solid border in one line

Question

Hi,

How can I use css to make the dotted border and solid border in one line in a drop down menu this site,

http://blip.tv/

here is the image I highlighted the line that I meant above,

here is the link of the drop menu which I fail to make the line like above. what I get is either a total solid border or dotted border, and I can't have them both dynamical like the site above.

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

some abstract of the 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;
    }

is it some tricks in javascript or using images?

many thanks Lau

Answer 1

The trick they use is putting a dotted border-bottom on the main menu item (on :hover) and a solid border-left, right and bottom on the drop down menu container. The trick is positioning them so they're pixel perfect using absolute positioning.

Answer 2

The way blip.tv created that effect was by doing the following:

1. Created a style for the 4 major links (Browse, Dashboard, Upload and Help) that had a solid border on top, right, left and a dotted border on the bottom. They then made this element position: relative and gave it a higher z-index than its drop-down menu.
2. The dropdown menu <ul> has a solid border all around it and is position absolute. When it appears, it is positioned 1px under its invoking link (which makes it look like the dotted and solid borders are on the same line).
3. Finally each <li> item of the dropdown has a dotted border on the bottom.