Forming a box around elements after hovering over li to display hidden ul

Question

I have a ul within an li. When I hover over my li, the ul appears. I'm trying to make it so when that happens, both the li and ul have borders that form a box.

I've set up a Fiddle: http://jsfiddle.net/2Jfpz/

What I want to do is:

• Make it so the border around my li remains. Maybe I should use active instead of hover on my li? Or use JavaScript/jQuery?
• Make it so the border around my ul stops under the li, so there are no borders inside of the box. So instead of it looking like there is a separate border around the ul and one around the li, it would be one continuous line along the outside. (EX: If you look at Stack Overflow, the "active" "oldest" "votes" links look like they don't have a bottom-border. The long line doesn't continue under those links.) Is there an easy way to style that? Do I make a bottom-border for the li that is extra thick and white? Or is there another way to hide the border-top of the ul that comes under the li?

I hope that makes sense.

Answer 1

Is this what you want?

http://jsfiddle.net/2Jfpz/1/