выпадающее меню: пунктирная граница и сплошная граница в одной строке

Question

Как я могу использовать css, чтобы сделать пунктирную границу и сплошную границу в одной строке в выпадающем меню этого сайта,

http://blip.tv/

вот изображение, которое я выделил линией, которую я имел в виду выше,

вот ссылка на выпадающее меню, которое мне не удалось сделать, как показано выше. я получаю либо сплошную границу, либо пунктирную границу, и у меня не может быть их обоих динамических, как на сайте выше.

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

некоторые аннотации ксс,

/* 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 или использовании изображений?

большое спасибо Lau

Answer 1

То, как blip.tv создал этот эффект, было сделано следующим образом:

1. Создан стиль для 4 основных ссылок (Обзор, Панель инструментов, Загрузка и Справка), которые имели сплошную границу сверху, справа, слева и пунктирную границу снизу. Затем они поместили этот элемент в положение: относительный и дали ему более высокий z-индекс, чем в раскрывающемся меню.
2. Раскрывающееся меню <ul> имеет сплошную границу вокруг и является абсолютным положением. Когда он появляется, он помещается на 1 пиксель под вызывающей ссылкой (что делает его похожим на пунктирные и сплошные границы на одной линии).
3. Наконец, каждый элемент <li> раскрывающегося списка имеет пунктирную границу внизу.

Answer 2

Уловка, которую они используют, - это поставить пунктирную границу снизу в главном пункте меню (on: hover) и сплошную рамку слева, справа и снизу в контейнере выпадающего меню.Хитрость в том, чтобы расположить их так, чтобы они были идеальными с точки зрения пикселей, используя абсолютное позиционирование.