Dropdown menu werkt niet goed in Chrome

De HTML code die ik gebruik voor het menu is als volgt:

<nav id="site-navigation">
				<div class="menu-hoofdmenu-container"><ul id="menu-hoofdmenu" class="nav-menu"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-20"><a href="http://stichtingwios.nl/">Home</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://stichtingwios.nl/over-ons/">Over ons</a>
<ul class="sub-menu">
	<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://stichtingwios.nl/over-ons/subpagina/">Subpagina</a></li>
	<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://stichtingwios.nl/over-ons/subpagina/">Subpagina</a></li>
	<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://stichtingwios.nl/over-ons/vrienden-van-wios/">Vrienden van WIOS</a></li>
</ul>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://stichtingwios.nl/diensten/">Diensten</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://stichtingwios.nl/referenties/">Referenties</a>
<ul class="sub-menu">
	<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://stichtingwios.nl/over-ons/subpagina/">Subpagina</a></li>
</ul>
</li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://stichtingwios.nl/nieuws/">Nieuws</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://stichtingwios.nl/contact/">Contact</a></li>
</ul></div>			</nav>

Voor de stijl gebruik ik de volgende CSS code:
‘<STYLE TYPE=”text/css”>
#site-navigation{
color:#ffffff;
float:right;
font-family: ‘nerissemibold’, tahoma, arial;
font-size:13px;
margin-top:30px;
text-transform:uppercase;
}

#site-navigation a{
color:#6e6e6e;
text-decoration:none;
}

#site-navigation ul li a:hover{
color:#ffffff;
}

#site-navigation ul ul li:hover{
background:#272525;
line-height:30px;
height:30px;
}

#site-navigation .current-menu-item a{
color:#ffffff;
}

#site-navigation ul{
list-style:none;
}

#site-navigation ul li{
display:block;
float:left;
height:30px;
line-height:30px;
margin-right:15px;
padding-right:20px;
position:relative;

}

ul.sub-menu{
float:left;
position:relative;
width:0;
z-index:10000;
}

ul.sub-menu li{
float:left;
position:relative;
}

ul.sub-menu ul{
margin:0;
padding:0;
width:200px;
position:absolute;
z-index:500;
}

ul.sub-menu li ul{
top:27px;
}

#site-navigation ul li ul{
display:none;
}

#site-navigation ul li:hover > ul{
display: block;
margin-left:0;
padding-left:0;
}

#site-navigation ul ul li{
background:#191919;
float:none;
line-height:30px;
margin-left:-50px;
text-align:center;
top:30px;
width:180px;
}

.menu-item-has-children{
background:url(“/images/template/pijltje-grijs.png”) no-repeat scroll right center rgba(0, 0, 0, 0);
}

.menu-item-has-children:hover{
background:url(“/images/template/pijltje.png”) no-repeat scroll right center rgba(0, 0, 0, 0);
}</style>
‘

Zoals eerder gezegd werkt het prima in IE en FF, maar niet in Chrome.