html - Menu impossible to click on in IE -

i have code creates list when hovered on, drops down reveal sub menu. problem is doesn't work in ie. when link hovered on in ie, doesn't drop menu down pushes on right, making impossible click on.

this code works perfect in ff , chrome , website got code said should work in ie.

i'm new @ coding tend copy , paste chunks of code , learn little bits figuring out on own way difficult.

any appreciated :)

css:

#dropmenu, #dropmenu ul {     list-style: none; } #dropmenu {     float: left;     width: auto; }  #dropmenu li {      width: auto; }  #dropmenu > li {     float: left;     width: auto;     } #dropmenu li {     display: block;     height: 2em;     line-height: 2em;     padding: 0 1.5em;     text-decoration: none; } #dropmenu ul {     position: absolute;     display: none;     z-index: 999; } #dropmenu ul li {     width: 80px; } #dropmenu li:hover ul {     display: block; }  /* main menu ------------------------------------------*/ #dropmenu {     font-family: arial;     font-size: 16px;     background: #; } #dropmenu > li > {     color: #000;     font-weight: normal; } #dropmenu > li:hover > {     background: #;     color: #000; }  /* submenu ------------------------------------------*/ #dropmenu ul {     background: #; } #dropmenu ul li {     color: #000; } #dropmenu ul li:hover {     background: #f16b20; }    #dropmenu ul li:hover {     color: white; } 

html:

<ul id="dropmenu">     <li><a href="#">our company</a>         <ul>             <li><a href="#">hellenico</a></li>             <li><a href="#">genere</a></li>             <li><a href="#">indulgentia</a></li>         </ul>     </li>     <li><a href="#">our solutions</a>         <ul>             <li><a href="#">hellenico</a></li>             <li><a href="#">genere</a></li>             <li><a href="#">indulgentia</a></li>         </ul>     </li>     <li><a href="#">service desk</a>         <ul>             <li><a href="#">hellenico</a></li>             <li><a href="#">genere</a></li>             <li><a href="#">indulgentia</a></li>         </ul>     </li>     <li><a href="#">resources</a>         <ul>             <li><a href="#">hellenico</a></li>             <li><a href="#">genere</a></li>             <li><a href="#">indulgentia</a></li>         </ul>     </li>     <li><a href="#">contact</a>         <ul>             <li><a href="#">hellenico</a></li>             <li><a href="#">genere</a></li>             <li><a href="#">indulgentia</a></li>         </ul>     </li> </ul> 

jsfiddle example

just done following changes in css. demo

  #dropmenu li {          width: auto;          position:relative; /*newly added*/     }     #dropmenu ul {         position: absolute;         display: none;         z-index: 999;         left:0;  /*newly added*/         top:20px; /*newly added*/     }