drop down menu border glitch

Okay – so, I know this is technically a CSS issue but I’m hoping to get help here anyways since there is no other realistic alternative.

My drop down menu should have rounded corners…As can be seen when first hovering over “photos” in the nav, they appear but then revert back to square corners.

Here is the CSS.

/*1st sub level menu*/
#mainMenu.ddsmoothmenu ul li ul{
	position: absolute;
	left: 0;
	display: none; /*collapse all sub menus to begin with*/
	visibility: hidden;
	width: auto;
	margin-left: -20px;
	padding-bottom: 0px;
	border: 1px solid #686868;
	border-radius: 10px;
	-webkit-border-radius: 4px;
	-webkit-box-shadow: 0px 0px 6px 4px rgba(8, 8, 8, .5);
	box-shadow: 0px 0px 6px 4px rgba(8, 8, 8, .5);
	/*border-bottom:1px solid #222;*/
}