Рамка вокруг активного пункта меню + подменю

[jdk]

Добрый день.

Подскажите пожалуйста как сделать такую рамку: Сейчас если навожу на услуги просто всплывает подменю.

[Sensei]

http://jsfiddle.net/bdek7qgy/

[TuTaHuKk]

может так?

 

http://jsfiddle.net/bdek7qgy/2/

[jdk]

Спасибо!

Edited March 6, 2015 by jdk

[jdk]

Что то не так делаю. У меня всё равно получается такой вариант:

Сам код вот :

.sub-menu {    list-style-type: none;    padding: 0;    padding-top: 10px;    display: none;}#menu-item-17:hover {    border-left: 1px solid #ccc;    border-top: 1px solid #ccc;    border-right: 1px solid #ccc;    border-bottom: 1px solid white !important;}#menu-item-17:hover ul {    display:block;    position:absolute;    left:158px;    width: auto;    border: 1px solid #ccc;    background: #fff;}

Нужно, что бы у родительского элемента не было рамки до наведения. Если ставлю для дочернего списка z-index: -1; , то после того, как убираю курсор с родительского элемента выпадающий список скрывается.

[TuTaHuKk]

понял вас! на данный момент вижу решением псевдо элементом :after но в этом случай меню должно быть фиксированным

 

http://jsfiddle.net/zmnhgeuj/1/

[TuTaHuKk]

Вот  !!

 

http://jsfiddle.net/zmnhgeuj/2/

[jdk]

Спасибо!