CSS positioning simulation projection, height can vary with content

Effect

Css:

* {
padding:0;
margin:0;
List-style-type:none;
}
Body {
padding:20px 0 0 20px;
}

#shadow {
Background: #E8E8E8;
position:relative;
width:250px;
margin:20px 0 0 5px;
font:12px/20px Arial;
}

#content {
position:relative;
Top: -5px;
Left: -5px;
Background: #fff;
border:1px solid #FF44FF;
Z-index:1;
padding:30px 10px 10px 10px;
}

#title {
width:238px;
height:40px;
Background: #DDDDDD;
Position:absolute;
Top: -20px;
Left: -5px;
border:1px solid #FF44FF;
border-width:1px 1px 0 1px;
Z-index:2;
line-height:40px;
padding-left:10px;
}

Html:

<div id= "Shadow" >
<div id= "title" > News </div>
<div id= "Content" >
<ul>
<li><a href= "#" > 1th title </a></li>
<li><a href= "#" > 2nd title </a></li>
<li><a href= "#" > 3rd title </a></li>
<li><a href= "#" > 4th title </a></li>
<li><a href= "#" > 5th title </a></li>
<li><a href= "#" > 6th title </a></li>
<li><a href= "#" > 7th title </a></li>
<li><a href= "#" > 8th title </a></li>
<li><a href= "#" > 9th title </a></li>
<li><a href= "#" > 10th title </a></li>
</ul>
</div>
</div>

CSS positioning simulation projection, height can vary with content