Separación entre elementos <li>

[thenine]

Hola, estoy teniendo un problema con IE8

tengo la siguiente distribución

Código HTML:

<ul>
    <li>Menu 1
    
    </li>
    <li>
       <div style="display: none;">
           <ul>
             <li>SubMenu1
             </li>
             <li>SubMenu2
             </li>
             <li>SubMenu3
             </li>
           </ul>
        </div>
    </li>
   <li> Menu 2
   </li>
    <li>
       <div style="display: none;">
           <ul>
             <li>SubMenu1
             </li>
             <li>SubMenu2
             </li>
             <li>SubMenu3
             </li>
           </ul>
        </div>
    </li>

.......
</ul> 

Pues bien, en Chrome y Firefox se ve perfecto pero en IE 8 se produce mucha separación entre los menus y queda un efecto muy feo.

Sabéis alguna forma de arreglarlo???

PD. Los menus ocultos se muestran mediante una función javascript

Salu2