NEED HELP! CSS drop down menu

hey guys this is seriously annoying me. I paid someone on this forum to code a drop down menu and they said they cant make it all aligned and im REALLY annoyed.

can someone please help me? Thanks guys

http://avoren.com/

If you hover over the nav bar you will find that Going over the categories in Catalogue they slightly drop when move to the next one.

Heres the code guys:

/* NAVIGATION MENUS */

#pagemenucontainer {
	height: 36px;
	list-style:none;
	font-weight:bold;
	/* Clear floats */
	float:center;
	align: center;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:-5;
	*/
}
	
#pagemenu {
	height: 30px;
	  background: url() #fff;
	-moz-border-radius: 15px;
 -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
	}


#pagemenu, #pagemenu ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	align: center;
	}
#pagemenu {
	margin-bottom: 0px;
	}
	
#pagemenu ul {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;		position: relative;
	}
	
#pagemenu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu li a, #pagemenu li a:link {
	color: #000;
	display: block;
    margin: 0px 3px 0px 3px;
	padding: 6px 12px 6px 12px;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 0px 0 #5b5b5b;
	}
	
#pagemenu li a:hover, #pagemenu li a:active, .current_page_item {
	background: url() #EAEAEA ;
	background-repeat: repeat-x;
	color: #000;
	display: block;
	text-decoration: none;
    border-radius: 15px;
	background-repeat: repeat-x;
	}
	
#pagemenu  li.current_page_item a {
	color:#fff;
    
	}


#pagemenu li:hover, #pagemenu li.sfhover { 
	//position: static;
	}#pagemenu ul ul {	display: none; border: 1px solid #000; border-top:0;	margin-left: 20px;	background: #EAEAEA; position: absolute;}	#pagemenu ul ul li{	float: left; border-top: 1px solid #000;	background: none;	padding: 0 5px 5px 5px;	position: relative;}#pagemenu ul ul li a {	float: left;	width: 10em;}#pagemenu ul li:hover ul ul, #pagemenu ul li:hover ul ul ul, #pagemenu ul li:hover ul ul ul ul{    display:none;}#pagemenu ul li:hover ul, #pagemenu ul li li:hover ul, #pagemenu ul li li li:hover ul, #pagemenu ul li li li li:hover ul { display:block;}#pagemenu ul ul ul {	left: 140px;}#pagemenu ul ul li a:hover{	background: none;}
height: 36px;
	margin-top: 11px;
	}

Code (markup):

 

I'm sorry. what do you mean all align? the dropdown position or what?

 

Well if you look when the come out of the side they have dropped down a pixel or two making them look out of alignment.

 

you have to remove the border-top. but without the border the menu kinda flat. try change this


#pagemenu li:hover, #pagemenu li.sfhover {
//position: static;
}#pagemenu ul ul { display: none; border: 1px solid #000; border-top:0; margin-left: 20px; background: #EAEAEA; position: absolute;} #pagemenu ul ul li{ float: left; border-top: 1px solid #000; background: none; padding: 0 5px 5px 5px; position: relative;}#pagemenu ul ul li a { float: left; width: 10em;}#pagemenu ul li:hover ul ul, #pagemenu ul li:hover ul ul ul, #pagemenu ul li:hover ul ul ul ul{ display:none;}#pagemenu ul li:hover ul, #pagemenu ul li li:hover ul, #pagemenu ul li li li:hover ul, #pagemenu ul li li li li:hover ul { display:block;}#pagemenu ul ul ul { left: 140px;}#pagemenu ul ul li a:hover{ background: none;}
height: 36px;
margin-top: 11px;
}

remove the code that i highlighted.

hope that helps

 

Thank you It does look out of place but il do some colour modifications.

Thanks again

 

is it working now? get rid of the top-margin