How to prevent absolute position <ul> inside <li> to change its width? - background

Question

I'm trying to achieve this effect.
Say we have this structure:
<ul id="menu">
<li>Guides
<ul>
<li>Getting Started</li>
<li>Characters</li>
<li>Epics</li>
<li>Road Map</li>
</ul>
</li>
<li>Skills</li>
<li>Equipments</li>
</ul>
and this simplified 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;
}
The problem is that having ul#menu>li>ul on absolute positioning makes it lose it's background gradient and shadow. background:inherit and box-shadow:inherit yield this result.
Is there a way to achieve the desired result?
Thank you in advance guys :)

Answer 1

This is the way I would do it - http://jsfiddle.net/bh6L5/3/
<ul id="menu">
<li>Guides
<ul>
<li>Getting Started</li>
<li>Characters</li>
<li>Epics</li>
<li>Road Map</li>
<div id="fake">Guides</div>
</ul>
</li>
<li>Skills</li>
<li>Equipments</li>
</ul>
Then add this to your 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;
}