problemas con Menu Despegable en IE

[vanne23]

Hola, en serio que esta web me ha ayudado bastante en la creación de mi pagina, así que por eso GRACIAS...

solo que entre códigos y más códigos, se me ocurrio darle dinamismo a mi web fan con un menú despegable.. y como de plano no doy una con Javascript (o por lo menos se me dificulta mas adecuar el código a lo que deseo) se me ocurrió hacer el menu solo con html y css!!
La verdad me emocione mucho al ver que tenia buenos resultados, y lo subi en una pagina de prueba para verlo en los navegadores, Chrome y Opera lo muestran EXCELENTE! pero no es lo mismo con Explorer .. Mientras en los demás es desplegable y horizontal , en IE es vertical y no muestra los submenus... No se me ocurre que hacer para solucionarlo, les dejo unas imagenes y el codigo que use... tal vez tenga algun error que me puedan ayudar a resolver...

(sorry por escribir tanto y no ir tan pronto al grano xD)
En chrome
menuIE.jpg

En explorer

menuchrome.jpg


El codigo html
--------------------------------------------------------------------------------------------------------------------------------------------

<link rel="stylesheet" href="maingeneral.css" type="text/css" media="all">

<p class="parrafouno">Mientras esperas te invitamos a seguirnos en <a href="#"><img src="objetos/tedited.gif" width="40px" height="40px" alt="Twitter"></a> </p>
<div id="main">
            <ul id="nav">
 
            <li><span><a herf="#"> Home</a></span>
            </li>
 
            <li><span>Carrera</span>
                <ul>
                    <li><a href="#">Menu item </a></li>
                    <li><a href="#">Menu item </a></li>
                    <li><a href="#">Menu item </a></li>
               </ul>
            </li>            
            <li><span>Multimedia</span>
 
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
						<li><span>Club</span>
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
						<li><span>Contacto</span>
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
        </ul>
 
    </div>

---------------------------------------------------------------------------------------------------------------------------------------------
El CSS
------------------------------------------------------------------------------------------------------------------------------------------------

#main { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block; color:white; font-family:Arial,Verdana; }
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; 
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:white; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

-------------------------------------------------------------------------------------------------------------------------------------------


De antemano gracias por sus respuestas

[virtualcomo]

que tal si jugas un poco con el atributo display? en vez de ponerle el valor block, inline?