css3 menu and z-index

[cindreta]

Hi guys i need help. I have this menu and i added the box-shadow to it. and now when i have hover states or active states of anchor tags it doesn't go to the end of the whole menu, it leaves the 2px shadow at the bootom and it looks weird. i know it has to be fixed with z-index so i can set a bigger height to the anchor tag andproblem solved. but how.

PICTURE OF WHAT I HAVE AND WHAT I NEED:

http://i54.tinypic.com/o902mb.jpg

CSS:

#menu ul {
    list-style-type: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
	overflow:hidden;
	height:40px;
	width:960px;
	background: #FF3333; /* old browsers */
	background: -moz-linear-gradient(top, #FF3333 0%, #990000 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF3333), color-stop(100%,#990000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#990000',GradientType=0 ); /* ie */
	-webkit-box-shadow: 0px 1px 2px #2b2b2b;
	-moz-box-shadow: 0px 1px 2px #2b2b2b;
	box-shadow: 0px 1px 2px #2b2b2b; 
}
 
#menu ul li {
    display: block;
    overflow: hidden;
    padding: 0px;
    cursor: pointer;
    float: left;
    margin: 0px;
    margin-left:20px;
}
 
#menu ul li:first-child {
	margin-left:10px !important;
}
 
#menu ul li.lang-hr {
	margin-left:45px !important;
}
#menu ul li.lang-en {
	margin-left:1px !important;
}
 
#menu ul li a {
    color: #fff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    display: block;
    height: 28px;
	padding:12px 5px 0px 5px;
 
}
 
#menu ul li a:hover, #menu ul li a.active  {
    color: #990000;
	background-color:#fff;
 
}

HTML

	<div id="menu">
		<ul>
			<li><a class="active" href="#">sample1</a></li>
			<li><a href="#">sample sample</a></li>
			<li><a href="#">sample3</a></li>
			<li><a href="#">sample3 samp</a></li>
			<li><a href="#">isample3423</a></li>
			<li><a href="#">sample45</a></li>
			<li><a href="#">sample5</a></li>
			<li><a href="#">sample6</a></li>
			<li class="lang-hr"><a class="active" href="#"><img src="images/icons/flags/hr.png" /></a></li>
			<li class="lang-en"><a href="#"><img src="images/icons/flags/gb.png" /></a></li>
		</ul>
	</div><!-- end #menu -->

thank you.