Website menu moved position in IE 9 but not in other browsers!

[kjx17]

Hi,

I used the following code to create a floating menu for my website.

"<style>
div.floating-menu {position:fixed;background:transparent;width:300px;z-index:100;left:80%;top:25%;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>
<div class="floating-menu">
<h3 style="color:black;font-size:55px;font-family:brush script mt;">Menu</h3>
<a href="http://www.quackit.com/css/" style="color:black;font-size:45px;font-family:brush script mt;">Vegetables</a>
<a href="http://www.quackit.com/css/" style="color:black;font-size:45px;font-family:brush script mt;">Main Dishes</a>
<a href="http://www.quackit.com/css/" style="color:black;font-size:45px;font-family:brush script mt;">Desserts</a>
</div>"

This line ("div.floating-menu {position:fixed;background:transparent;width:300px;z-index:100;left:80%;top:25%;}") put the menu in the top right corner of the webpage.

However the menu was placed at the left side of the page when viewed in IE 9.

Is there another option I can use to set the location of menu which also works in IE?

Thanks in advance!