When visiting my website, I encountered an issue with the main menu. Specifically, when hovering over 'Populaire boeken', the first 2 menu items display properly with an image on mouseover. However, there seems to be a pesky grey border surrounding the image. I've tried various solutions like using border:none, border:0, and outline:none, but nothing seems to work.
The images are displayed using the following jQuery function:
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.level1 li').mouseover(function(){
$this = jQuery(this);
if(typeof $this.find('img').attr('src') != "undefined"){
$this.parent().parent().parent().find('.imageChangeDefault').css('background','url('+$this.find('img').attr('src')+')').css('background-repeat','no-repeat').css('width','inherit').css('height','inherit').css('background-size','100% 100%');
}
});
})
</script>
I'm at a loss here. Any suggestions or guidance would be greatly appreciated!
Thank you in advance for your help.