Drop down menu trouble in IE. Probably CSS is at fault

[Botondus]

Ok so i have a a couple drop down menus, that are used as filters. I mean to select filters for a listing of products.
They work perfectly in Firefox, however in IE the drop down doesn't activate every time it should. If you check the code fragment from my template below, the bold part is the text on one of the filters and a small arrow image. In IE if you put the mouse cursor between the text and the arrow the drop-down doesn't trigger, which is quite annoying.

[HTML] <div id="filters">
...
<div class="filter_group">
<div id="trigger_manufacturers" class="trigger_filters">
Manufacturers <img class="filter_arrow" src="images/filter_arrow.gif" alt="arrow" />
</div>
<ul id="filter_manufacturers" class="filters">
{section name=m loop=$manufacturers}
<li><a class="frontend_black" href="url">{$manufacturers[m].manufacturer_name}</a></li>
{/section}
</ul>
</div>
.....
</div>
[/HTML]

I suspect it is a CSS problem because i tried different menus and i got the same problem. I couldn't find any solution to this annoying issue in IE, so i would really appreciate some tips.
This is all the CSS code related to the filters:

#filters{
    padding-top    : 2em; 
}
#filters div.filter_group{
    float    : left;
    width    : 10em;    
    padding:0.2em; 
}
#filters ul{
    width    : 9em;    
    margin    : 0px;
    padding    : 0px;
}
.trigger_filters {
    cursor:pointer;
    background:transparent url("images/filters_background.jpeg") repeat-x;
    border:1px solid #555555;
    font-weight:bold;
    font-size:11px;
 
}
ul.filters {
    position:absolute;  
    visibility:hidden;
    overflow:hidden;
    z-index: 3;
    margin:0;
    background:#f5f5f5;
    border:1px solid #ff9724; 
    vertical-align:top;
}
ul.filters li{
    /*border-bottom:1px dotted #ff9724;*/
    border-left:1px solid white;
    border-right:1px solid white;
    background: transparent url("images/dotted_line.jpeg") repeat-x bottom;
}
#filters span{
    float:left;
    font-weight:bold;
    font-size:11px;
    margin-top:4px;
}
img.filter_arrow{
    position:relative;
    float:right;
    top:-10px;
    right:3px;
}

Thanks in advance for your help!

[drhowarddrfine]

There is not enough mark up there to help you. Got link?

[Botondus]

It's not online yet so i can't give you a link. I included the template code for the filter drop-down and the CSS, what else should i add?
I could make some screenshots of the drop-down in IE/FF to show it's exact behaviour and include the javascript code related to it or tell me if you need something else. Although i doubt javascript would be at fault, since i tried pure CSS drop-down too, with JS addition for IE but it showed the exact same behaviour in IE.

[Botondus]

Hmm..Unfortunately it seems i can't capture the mouse cursor itself too in the screenshots.
This is approximately the "blind" area that doesn't activate the drop-down in IE when you put the mouse cursor over it:

This is how the menu looks like in Firefox. Activates properly on the whole surface of the menu header:

And the same in IE. Activates only if cursor is over the text or the small arrow, not between:

[drhowarddrfine]

You need to post the complete code, from top to bottom. Pictures do no good and the markup shown above doesn't show anything. Any generated code, other than javascript, won't be of use either.