:hover not sticking to element

<div>My Cart (0 items)</div> and #cart do not overlap, but they have no pixels between them. The problem I'm running into is when I mouse over the My Cart #cart shows, which is correct given the :hover class, but the problem is when I move my mouse off of My Cart and onto #cart the :hover doesn't stick. Any ideas why? There is no space between these two elements, so I thought it would be seamless.

            #hd .top-nav ul .tab:hover .content {
                display: block;
            }

<li class="tab my-cart"><div>My Cart (0 items)</div>
            <div id="cart" style="display: block;">
                <table>

                    <tbody><tr>
                        <td class="no-result faded" colspan="4">Your cart is empty</td>
                    </tr>
                            <tr class="empty-row hide">
                                <td class="remove"><img src="/images/s.gif"></td>
                                <td class="product">
                                    <a href="#"><strong></strong></a>
                                </td>
                   开发者_开发问答             <td class="quantity"></td>
                                <td class="quantity-options">
                                    <div class="adjust">
                                        <div class="increment"></div>
                                        <div class="decrement"></div>
                                    </div>
                                </td>
                            </tr>                   
                </tbody></table>
                <div class="yui-g">
                    <div class="yui-u first">
                        <div class="working faded hide">
                            Working...
                        </div>
                    </div>
                    <div class="yui-u">
                        <div class="review hide">
                            <div class="button"><a href="/store/cart/view/">Review purchases</a></div>
                        </div>
                    </div>
                </div>
            </div></li>

Is your issue with IE6? IE6 has notoriously spotty support for pseudo classes (:anything). IE6 does support :hover, but only on anchor tags.

Check out this writeup.

Sorry, the problem was something stupid... the CSS wasn't doing the hover, it was javascript