CSS子菜单

Question

请检查该小提琴： http://jsfiddle.net/5WGLs/

如果你将鼠标悬停在basker-holder，你可以看到它的儿童安全>shopping-cart顶部边框并没有落后它的父。它应该是白色的。我寻找的大意是这样的：

http://i.stack.imgur.com/XBV82.png

Answer 1

只需添加position: relative;，background-color: #fff;和z-index: 2000;到.cart-btn。

这样，.cart-btn将超过.shopping-cart和background-color将隐藏到边界顶部。

景观为例：http://jsfiddle.net/5WGLs/3/

希望这有助于。

Answer 2

jsfiddle DEMO

与z-index和background;播放，我们可以acheive是

编辑CSS

.cart-btn { 
    color: #333; 
    display: inline-block; 
    margin-top: 12px; 
    padding: 5px 22px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    line-height: 30px; 
    border: 1px solid #fff; 
    position: relative; 
    z-index:10; 
    background:#fff; 
} 

.shopping-cart { 
    position: absolute; 
    background: #FFF; 
    left: 0; 
    text-align: left; 
    width: 160px; 
    border: 1px solid #fe4365; 
    top: 52px; 
    opacity: 0; 
    transform: translateY(25px) rotateY(50deg); 
    z-index:-1; 
} 

Answer 3

你可以使用z-index。 Demo

但是你应该读What No One Told You About Z-Index，因为使用如此大的z-索引是无用的。