bordery w li w menu, "wspolne" bordery dla kilku li Opcje

[_kama]

Dziwny problem. Potrzebuje zrobic menu w zgodzie z projektem. Zarys jest jak na screenie -
(IMG:http://www1.picturepush.com/photo/a/6665099/640/6665099.gif) . Dwa pytania:
- jak pozbyc sie zielonego bordera tego nad rozwinietym, aktywnym li
- jak powinien wygladac styl dla :hover zeby efekt byl jak na screenie?
Prosze o pomoc (IMG:style_emoticons/default/smile.gif) Dziwny efekt bo musze osiagnac efekt jakby te bordery byly wspolne dla sasiadujacych li (IMG:style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
<ul>
	<li><a href="#">To jest pierwsza opcja i ma  długa nazwe</a></li>
	<li><a href="#">Druga</a></li>
	<li class="active"><a href="#">To jest trzecia i do tego jest jeszcze aktywna</a>
		<ul>
			<li><a href="#">jeden</a></li>
			<li><a href="#">dwa</a></li>
			<li><a href="#">trzy</a></li>
			<li><a href="#">cztery</a></li>
		</ul>
	</li>
	<li><a href="#">Czwarta</a></li>
	<li><a href="#">Piąta</a></li>
</ul>
 
 
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
* {padding: 0; margin: 0}
ul li a {display: block; background-color: #FFF; padding: 5px}
ul li {border: 1px solid green; width: 200px; list-style: none; margin-top: -1px; z-index:10}
ul li.active {z-index:100; margin-bottom: 1px; border-bottom: 0 solid}
ul li.active a {background-color: #CCC; border: 1px solid red; width: 190px; margin-left: -1px}
ul li.active ul {border-left: 1px solid green}
ul li.active ul li a {background-color: #FFF; border: 0 solid; padding-left: 30px; width: 160px}
ul li ul li {width: auto; border: 0 solid; margin: 0}
[HTML] pobierz, plaintext