Problem z menu Opcje

[napixowany]

Witam serdecznie, podczas tworzenia strony dla mojej szkoły natrafiłem na mały problem związany z menu, którego nie mogę od dłuższego czasu rozwiązać. Otóż mam box o zaokrąglonych bokach, który jest podzielony na trzy divy. Pierwszy oraz trzeci div zawiera pasek w formacie png, który jest zaokrąglony w rogach, natomiast w divie numer dwa mieści się menu. Problem w tym, że jest ono wyświetlane poza tymi trzema divami, a nie tak jak powinno, czyli w obrębie divu drugiego. Kod html przedstawia się nastepująca:

[HTML] pobierz, plaintext 
<div style="float: left">
<div id="colLeft">
<div id="colLeftUp"></div>
<div id="colLeftCenter">
<ul>
<span>Rekrutacja</span>
<li>Oferta szkoły</li>
<li>Zasady rekrutacji</li>
<li>Formularz rekrutacyjny</li>
<li>Wyniki rekrutacji 2010</li>
</ul>
</div>
 <div id="colLeftDown"></div>
</div>
</div>
[HTML] pobierz, plaintext 

A CSS:

[CSS] pobierz, plaintext 
#colLeft { float: left; width: 196px; margin-top: 10px; margin-right: 10px; }
#colLeftUp { height: 6px; background-image: url(images/menu-top.png);  }
#colLeftCenter { width: 190px; background-color: #f8f6f4; border-left: 1px solid #cac3b6; border-right: 1px solid #cac3b6; padding: 0 2px;}
#colLeftDown { height: 6px; background-image: url(images/menu-bottom.png); }
#colLeftCenter ul { width: 178px; height: 19px; padding-top: 6px; padding-left: 12px; list-style-type: none; background-image: url(images/menu-ul.png); }
#colLeftCenter span { color: #ffffff; font-weight: bold; text-shadow: 1px 1px 1px #8faa14; }
#colLeftCenter li { margin: 12px; list-style-type: none; }
[CSS] pobierz, plaintext 

Z powyższego kodu uzyskuje taki efekt:
(IMG:http://zapodaj.net/images/7852df3bb0c7.png)

Jednakże bardzo zależy mi na tym, aby ów box wyglądał tak:
(IMG:http://zapodaj.net/images/50578e9f6cd2.png)

Liczę na duże zainteresowanie moim problemem i szybką pomoc. W zamian mogę zaoferować małe projekty graficzne. Pozdrawiam