background - 如何防止绝对位置里面改变它的宽度？

Question

我正在努力达到这个效果。

假设我们有这样的结构：

<ul id="menu">
    <li><a href="#">Guides</a>
        <ul>
            <li><a href="#">Getting Started</a></li>
            <li><a href="#">Characters</a></li>
            <li><a href="#">Epics</a></li>
            <li><a href="#">Road Map</a></li>
        </ul>
    </li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Equipments</a></li>
</ul>

这个简化的CSS：

ul#menu {
    display:inline-block;
    list-style-type:none;
    padding:0;
    height:30px; /* So the ul#menu's height isn't changed by the ul#menu>li>ul */
    overflow:visible; /* So the ul#menu>li>ul is visible on ul#menu>li:hover */
    background: #e69646;
    box-shadow:0 2px 3px 0 #666;
}

ul#menu>li>ul {
    list-style-type:none;
    padding:0;
    position:absolute;
    background:inherit; /*  */
    box-shadow:inherit;
}

问题是在绝对定位上使用 ul#menu>li>ul 会使其失去背景渐变和阴影。background:inherit并box-shadow:inherit产生这个结果。

有没有办法达到预期的结果？

提前谢谢你们：）

Answer 1

这就是我会做的方式 - http://jsfiddle.net/bh6L5/3/

<ul id="menu">
    <li><a href="#">Guides</a>
        <ul>
            <li><a href="#">Getting Started</a></li>
            <li><a href="#">Characters</a></li>
            <li><a href="#">Epics</a></li>
            <li><a href="#">Road Map</a></li>
            <div id="fake">Guides</div>
        </ul>
    </li>
    <li><a href="guides.html">Skills</a></li>
    <li><a href="guides.html">Equipments</a></li>
</ul>

然后将此添加到您的CSS

#fake {
    position:absolute;
    width:45px;
    height:31px;
    padding:0 10px;
    background: #e69646; 
    z-index:999;
    top: -31px;
    left:0px; 
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    -webkit-border-radius-topleft:5px;
    -webkit-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
}