Menu impossible to click on in IE - html

Question

I have some code that creates a list that when hovered on, drops down to reveal a sub menu. the problem is is that it doesn't work in IE. When the link is hovered over in IE, it doesn't drop the menu down but it pushes it over to the right, making it impossible to click on.
This code works perfect in FF and Chrome and the website I got the code from said that it should work in IE.
I'm fairly new at coding as I tend to copy and paste chunks of code and learn little bits so figuring something like this out on my own is way too difficult.
Any help would be greatly 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 a {
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 a {
width: 80px;
}
#dropmenu li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#dropmenu {
font-family: Arial;
font-size: 16px;
background: #;
}
#dropmenu > li > a {
color: #000;
font-weight: normal;
}
#dropmenu > li:hover > a {
background: #;
color: #000;
}
/* Submenu
------------------------------------------*/
#dropmenu ul {
background: #;
}
#dropmenu ul li a {
color: #000;
}
#dropmenu ul li:hover a {
background: #f16b20;
}
#dropmenu ul li:hover a {
color: white;
}
HTML:
<ul id="dropmenu">
<li>Our Company
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Our Solutions
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Service Desk
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>resources
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Contact
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
</ul>
JSFiddle EXAMPLE

Answer 1

Just done following changes in your 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*/
}

Answer 2

Add a position:relative; to your #dropmenu li, this can do. also try it with a margin-left: 0; to your #dropmenu li ul
I did the follow and its working for me:
/* added position relative */
#dropmenu li {
position: relative;
float: left;
}
And removed #dropmenu > li
And added the padding, background and margin-left to #dropmenu ul
#dropmenu ul {
position: absolute;
display: none;
z-index: 999;
margin-left: 0;
padding: 0;
background: #fff;
}