奇怪的 :hover问题求解，调试:hover无响应。

Question

下面是我的代码结构：

html

<div id="my-cart">
    <span id="my-cart-in">
        <i class="img-icon cart"></i>我的购物车<i class="corner-mark">5</i>
    </span>
    <ul id="my-cart-list-mini">
        <li></li>
    </ul>
</div>

css

#my-cart #my-cart-list-mini{
             display: none;
}
#my-cart:hover #my-cart-list-mini{
             display: block;
}

现在情况是浏览器根本不响应hover,而且我用调试工具设置hover也没有任何效果，真是奇了怪了！

分割线

问题已经解决了，可是不是很明白，我的#my-cart外面还有一层DIV如下：

<div id="header-container">
    <div id="my-cart">
        <span id="my-cart-in">
            <i class="img-icon cart"></i>我的购物车<i class="corner-mark">5</i>
        </span>
        <ul id="my-cart-list-mini">
            <li></li>
        </ul>
    </div>
</div>

按上面的思路，只有把hover加在#header-container上才能有效，加在#my-cart上就无效，请问这是为什么？

Answer 1

看看my-cart盒模型？

Answer 2

前排，表示根本没看懂你在写什么

Answer 3

有效果呀，怎么没效果？我这试过了，可以用的，你把li中随便写上点内容试试

Answer 4

是不是写了overflow:hidden;把hover出来的层隐藏掉了呢？

Answer 5

对子元素my-cart-list-mini设置一下position：absolute,my-cart设置position：relative试试，有时候可能显示出来被其他元素遮挡了