Hover Color Block appears on Top of Original Block in Menu

HTML & CSS
1

Hello again,

My home page navigation menu I’m constructing is not working properly at all. What happens is the menu shows up correctly, but when I mouse over the main list, another block with my hover colors appear on top of the original one, and the original stretches out to align the hover color block in the center of the first block. Some mistake in my code is making a left-side main list border appear in the child list. What have I done to approach this incorrectly?

Here are my CSS styles:


/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper{
	padding-bottom:53%;
	padding-left:12%;
}
.pMenu{
	margin:0;
	padding:0;
	list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	width:100%;
	display:inline-block;
}
ul.pMenu ul li ul li a{
	width:100%;
	display:inline-block;
}
ul.pMenu ul li ul li ul li a{
	width:100%;
	display:inline-block;
}

/*top level li specifications*/
#health{
	width:8%;
	padding-right:2%;
	text-align:center;
}

#insurance{
	width:13%;
	padding-right:2%;
}

#shopping{
	width:12%;	
	padding-right:2%;
}

#dating{
	width:7.5%;
	padding-right:2%;
}

#education{
	width:14.5%;
}

/*begin main list attributes*/
ul.pMenu li{
	float:left;
	list-style:none;
	margin-right:2%;
	display:block;
	background:#900;
	border:.33em ridge #C30;
	white-space:nowrap;
	padding-top:.7em;
	padding-left:.1em;
	padding-right:.1em;
	padding-bottom:.7em;
}
ul.pMenu li a{
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li:hover > a{
	background:#F00;
	border:.33em ridge #C90;
	color:#FF0;
}

/*first sub-list*/
ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	top:33px;
	margin-right:0;
}

ul.pMenu li ul li a{
	width:10em;
	background:#CCC;
	border:.25em outset #999;
	height:1em;
	left:5.35em;
	font-size:12px;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
	position:relative;
	display:block;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:.25em inset #666;
	text-decoration:blink;
}

ul.pMenu li:hover > ul li a{
	width:10em;
	background:#CCC;
	border:.25em outset #999;
	height:1em;
	left:5.35em;
	font-size:12px;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
	position:relative;
	display:block;
}

/*second sub-list*/
ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
	display:none;
}

ul.pMenu li:hover > ul{
	visibility:visible;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:.15em outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:.15em inset #666;
	text-decoration:blink;
}

/*third sub-list*/
ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/******************/
2

I fixed this with my css rule positioning somehow.