pure CSS dropdown menu border around outside only

Question

I'm making a pure css dropdown menu (code here: http://jsfiddle.net/SeXyv/7/ ) and I would like to have a border only around the outside and not in between items.

The issue I am having is the border between the "topic" and "subtopic 1" in the js.fiddle example. I can get a border all the way across between the two, but I only want it on the top right portion as an outline, not directly between the two links (where the gold and gray meets)

Can anyone help me out here?

Thanks

EDIT: here is a pic of what I would like the border, the part circled in red, with the border stopping once it reaches the tab above it: http://tinypic.com/view.php?pic=300ehxt&s=6

Answer 1

Basically you put a bottom border on the last element in the dropdown menu and a top border on the first element, then let the element that triggers the dropdown menu have a higher z-index than the menu, then push the menu up the width of the menu

#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

add <li style="z-index: 5"><a href="#" class="bordertest" >Topic</a> to your HTML. And add the required class.

Working fiddle here

Adjust the corners etc.