CSS Dropdown Menu Functionality Error In IE7,8 & 9 - html

Question

I have a CSS dropdown menu that works perfectly in Mozilla/Chrome/Safari. However it is a bit iffy if IE10 (but works) but does not work at all in IE9.
I have tried to figure out what is causing this as there are websites that use CSS dropdown menus that function perfectly in IE.
Please see here for fiddle: http://jsfiddle.net/xZuDC/
The images are as follows:
Normal Menu in chrome
Menu in IE
List:
<ul class="ulrRight">
<li><a onclick="your_name">Your Account</a>
<ul id="your_name">
<li>Details</li>
<li>Password</li>
</ul>
</li>
</ul>

Answer 1

I made a few changes and as far as I can tell it works in IE9.
This was the only thing I found to cause the fiddle to not work, <ul class="ulrRight"> <--- had an extra r after ul
jsfiddle doesn't seem to work in IE 8 and under, at least in the console's browser view.
Here is the fiddle with the updates I made
fiddle
I would suggest just writing this a little cleaner like so:
<div class="dropDown">
<ul>
<li>Your Account
<ul>
<li>Details</li>
<li>Password</li>
</ul>
</li>
<li>Help
<ul>
<li>Support</li>
<li>Contact Us</li>
<li>Client FAQ's</li>
<li>Haulier FAQ's</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
CSS
.dropDown {
width: 500px;
height: 60px;
margin: 0 auto;
background: mediumSeaGreen;
}
.dropDown > ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropDown > ul > li {
float: left;
width: 33.3333%;
line-height: 60px;
text-align: center;
}
.dropDown > ul > li:hover {
background: #1b1b1b;
color: #fff;
}
.dropDown > ul > li:hover > ul {
display: block;
}
.dropDown > ul > li > ul {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
fiddle for code