problemen met dropdownmenu

#container #menu{background:url(../images/menu-bg.png) repeat-x; width: 1024px; height:40px; float: left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: block; } 
#container #menu ul.ul li.li-first{ margin-left: 39px; font-weight:bold;}
#container #menu ul.ul li.li{ list-style-type: none; line-height: 40px; padding: 0px 9px 0px 9px; margin-left: -15px; font-weight:bold; }
#container #menu ul.ul li.li:hover{ display: block;  background-color: #3399FF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-weight:bold;}


#container #menu ul.ul li.li_right{ list-style-type: none; line-height: 40px; margin-right: 15px; padding: 0px 9px 0px 9px; float: right; font-weight:bold;}
#container #menu ul.ul li.li_right:hover{ display: block;  background-color: #3399FF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-weight:bold;}


ul li.drop {
	position: relative;
	margin-top:12px;
	margin-left: 20px;
	
}
ul > li {
	display: inline-block;
}
ul li a {
	color: #777;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
ul li a:hover {
	color: #eee;
}


.dropOut .triangle {
	width: 0;
	height: 0;
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid white;
	top: -7px;
	left: 50%;
	margin-left: -10px;
}
.dropdownContain {
	width: 160px;
	position: relative;
	left: 50%;
	margin-left: -94px; /* half of width */
	top: -400px;
}
.dropOut {
	width: 160px;
	background: white;
	float: left;
	position: relative;
	margin-top: 0px;
	opacity: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
	-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
	box-shadow: 0 1px 6px rgba(0,0,0,.15);
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}


.dropOut ul {
	float: left;
	padding: 10px 0;
}
.dropOut ul li {
	text-align: left;
	float: left;
	width: 125px;
	padding: 12px 0 10px 15px;
	margin: 0px 10px;
	color: #777;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: background .1s ease-out;
	-moz-transition: background .1s ease-out;
	-ms-transition: background .1s ease-out;
	-o-transition: background .1s ease-out;
	transition: background .1s ease-out;
}


.dropOut ul li:hover {
	background: #f6f6f6;
}


ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 5px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

<div id="menu">
		<ul class="ul">
			<li class="li-first"><a href="index.php">Home</a></li>
			<li class="drop">
				<a href="#">Welkom</a>
				<div class="dropdownContain">
					<div class="dropOut">
						<div class="triangle"></div>
						<ul>
							<li>Plan</li>
							<li>Account Settings</li>
							<li>Switch Account</li>
							<li>Sign Out</li>
						</ul>
					</div>
				</div>
			</li>
			<li class="li"><a href="index.php">Home</a></li>			
			<li class="li_right"><a href="/klantenpaneel/registreren.php">Registreren</a><img src="images/inloggen.png" alt="Registreren" title="Registreren" /></li>
			<li class="li_right"><a href="/klantenpaneel/inloggen.php">Inloggen</a><img src="images/inloggen.png" alt="Registreren" title="Inloggen" /></li>			
		</ul> 
	</div>