borde del menú desplegable de CSS puro alrededor de afuera solo

Question

Estoy haciendo un menú desplegable de css puro (código aquí: http://jsfiddle.net/SeXyv/7/) y me gustaría tener un borde solo alrededor del exterior y no entre los elementos.

El problema que estoy teniendo es el límite entre el "tema" y "subtema 1" en el ejemplo js.fiddle. Puedo obtener un borde completo entre los dos, pero solo lo quiero en la parte superior derecha como un contorno, no directamente entre los dos enlaces (donde se encuentran el dorado y el gris)

¿Alguien me puede ayudar? ¿aquí?

Gracias

EDIT: aquí hay una foto de lo que me gustaría la frontera, la parte círculo rojo, con el término parar una vez que alcanza la pestaña por encima de ella: http://tinypic.com/view.php?pic=300ehxt&s=6

Answer 1

Básicamente te ponen un borde inferior en el último elemento en el menú desplegable y un borde superior en el primer elemento, a continuación, dejar que el elemento que desencadena el menú desplegable tienen un mayor índice z que el menú, a continuación, empuje el menú hasta la anchura de la menú

#menu li:hover a {/*increace the z-index over that of the menu*/ 
    ... 
    position:relative; 
    z-index:5; 
} 
#menu li:hover li:first-child a{/*first menuitem gets a top border */ 
    border-top:2px black solid; 
} 
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */ 
    border-bottom:2px black solid; 
} 
#menu li:hover ul{/* move up menu to cover up part of top border*/ 
    position:relative; 
    top:-2px; 
} 

http://jsfiddle.net/SeXyv/14/

Answer 2

añadir <li style="z-index: 5"><a href="#" class="bordertest" >Topic</a> a tu HTML Y agrega la clase requerida.

Working fiddle here

Ajuste las esquinas etc.