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得られます。

望ましい結果を達成する方法はありますか？

よろしくお願いします:)