overcome overflow:hidden property of parent element

overcome overflow:hidden property of parent element

By clicking on a button I'm adding new elements to the list. Each element
has its own message that is absolutely positioned against this element.
This works fine until I add 'overflow:hidden' property to the parent list
element. Obviously, the message is hidded. If the overflow:hiddne property
must be in place, how can I show message for each new element? Here is the
jsFiddle and the code:
HTML:
<span id='click-me'>Click me</span>
<ul id='list'></ul>
CSS:
#list {
width:100px;
height:100px;
border: 1px solid blue;
overflow:hidden;
}
.option {
width:100px;
height:20px;
border: 1px solid green;
position:relative;
}
.message {
width: 79px;
height: 20px;
background: gray;
position: absolute;
right: -90px;
top: 0;
}
JS:
$('#click-me').click(function() {
$('#list').append("<li class='option'><div class='message'>I'm
message</div></li>");
});