Simple menu works in chrome, fails in IE

Question

Simple menu of in plain CSS / html as shown:

<div class="nav-container">
            <div id="corp-crumb">
                <ul class="vertlist" id="ulTop">
                    <li class="crumblink submenu"><a id="homeLink" href="#home" title="Home" class="crumblink">Home</a>
                    </li>
                    <li class="crumblink submenu"><a id="activitiesLink" href="#activities" title="Activities" class="crumblink">Activities</a>
                        <ul>
                            <li><a href="#" title="Issues">Issues</a></li>
                            <li><a href="#" title="Meetings">Meetings</a></li>
                        </ul>
                    </li>
                    <li class="crumblink submenu"><a id="a1" href="#marketing" title="Marketing" class="crumblink">Marketing</a>
                        <ul>
                            <li><a href="#" title="Corporate Groups">Corporate Groups</a></li>
                            <li><a href="#" title="Companies">Companies</a></li>
                            <li><a href="#" title="Contacts">Contacts</a></li>
                        </ul>
                    </li>
                     <li class="crumblink submenu"><a id="a2" href="#operations" title="Operations" class="crumblink">Operations</a>
                        <ul>
                            <li><a href="#" title="Programs">Programs</a></li>
                            <li><a href="#" title="Projects">Projects</a></li>
                            <li><a href="#" title="Sub Projects">Sub Projects</a></li>
                        </ul>
                    </li>
                    <li class="crumblink submenu"><a id="reportsLink" href="#reports" title="Reports" class="crumblink">Reports</a>
                    </li>
                </ul>
            </div> 
        </div>

When I hover over the li item I get a sub menu of the ul items. In chrome the list functions correctly, if I hover over the li it stays open to select the sub menu. In IE however, when I hover over it and then try to go to the ul sub item menu it quickly disappears.

Here is my jsfiddle: http://jsfiddle.net/Ncrwg/

Tested with both IE9 and IE10.

Answer 1

I think you need to close the gap between the navigation and the drop down <ul>.

Adding top: -3px to the div#corp-crumb ul li ul should fix this.

EDIT:

If you want to maintain the space use something like border-top: 3px solid #FFF; top: -2px;