Esconder - Exibir conteúdo.

Bom pessoal,

Tenho a seguinte estrutura HTML:

<div id="bottom" class="hada">
<ul>
<li><a href="#"><img src="hada.png" />y</a></li>
<li><a href="#"><img src="hada.png" />y</a></li>
<li><a href="#"><img src="hada.png" />y</a></li>
<li><a href="#"><img src="hada.png" />y</a></li>
</ul>
</div>

Certo, agora preciso esconder dois itens da lista acima... Ficando assim:

<div id="bottom" class="hada">
<ul>
<li><a href="#"><img src="hada.png" />y</a></li>
<div id="escondido" style="display:none;">
<li><a href="#"><img src="hada.png" />y</a></li>
<li><a href="#"><img src="hada.png" />y</a></li>
</div>
<li><a href="#"><img src="hada.png" />y</a></li>
</ul>
</div>

Usarei uma função javascript pra exibir e esconder os itens que estão dentro da div conteudo.

Até aí tudo bem, no Firefox, Google Chrome, Opera, Safari e Netscape fica tudo OK, mas infelizmente, no Internet Explorer, todo o conteúdo que vem após o </div> tem o seu estilo CSS quebrado...

Vejam:

>

<div id="bottom" class="hada">

<ul>

<li><a href="#"><img src="hada.png" />y</a></li>

<div id="escondido" style="display:none;">

<li><a href="#"><img src="hada.png" />y</a></li>

<li><a href="#"><img src="hada.png" />y</a></li>

**</div>**

<li><a href="#"><img src="hada.png" />y</a></li>

</ul>

</div>

O que vocês sugerem pra que eu possa esconder alguns itens da lista e exibi-los dinamicamente com funções javascript, sem ter o CSS quebrado?

PS: Já tentei envolver as listas com outro <li></li>, mas tive problemas, já tentei utilizar <span></span>, e também já tentei utilizar <ul></ul> mas também tive problemas...

O que vocês me sugerem ?

Até mais,

Abrass.