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.

Wat ik dus eigenlijk bedoel is dat de afbeelding altijd moet schalen.
Op elke resolutie moet de foto volledig getoond worden.

Bijv. zoals deze website: http://wp.themecss.com/switcher/?theme=Source