html - CSS 配置によるオーバーフロー

Question

http://jsfiddle.net/myxzh/6/

ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
top: -10px;
}

li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;  
}

#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
}

#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}

<div id="con">
<div id="logo">
</div>
<div id="list">
<ul>           
       <li><a href="news.asp">Hello</a></li>
       <li><a href="contact.asp">Hello</a></li>
       <li><a href="about.asp">Hello</a></li>
   </ul>
</div>
</div>

私はこのコードを持っており、リスト要素が赤い div ボックスの 100% を占めるようにしようとしています。現在、リストは赤い div の外に出ていますが、これは私がやろうとしていることではありません。黒の div(リスト項目) が赤の div の 100% を埋め、赤の div の外に出ないようにするにはどうすればよいですか?