Problem with displaying a menu in Opera browser

I'm new to this forum so firstly I want to say hi to everyone.

I'm learning html and css for about a month so I'm still quite a beginner. I've been working on this page for some time and I still can't solve the problem of badly displayed menu in Opera.

Here's how it looks in Chrome and Firefox (don't worry it's just a polish version of ImageShack). As you can see the menu buttons are contained within the brown nav bar as they should be:
- http://pokazywarka.pl/t70r3n/

And here's the problem I have to solve, displayed in Opera:
- http://pokazywarka.pl/9t3ny6/
In this case menu buttons are thrown out from the nav bar.

Here is a html code for a menu and nav bar:
nav>
div id="navi">
a href="index.html" id="logo">
/a>
div id="menu">
a href="forum.html" class="forum">
a href="quizy.html" class="quizy">
a href="vs.html" class="vs">
a href="postac.html" class="postac">
a href="rankingi.html" class="rankingi">
a href="index.html" class="in-index">
/div>
/div>
/nav>

A css code for a menu and nav:

body { width: 100%; margin: auto; font-family: arial; color: #352315; background-color: #eceae1; }
nav { width: 100%; height: 75px; background-color: #352315; }
#navi { width: 950px; margin: auto; }
#logo {position: relative; top: 16px; }
#menu {float: right; }
#menu a {display: block; float: right;}

and the example of button code here:

.in-index { display:block; width:123px; height:75px; background: url(menu/index-mouse.png); background-repeat: no-repeat; float: right; }
.index { display:block; width:123px; height:75px; background: url(menu/index.png); background-repeat: no-repeat; float: right;
-webkit-transition: background 0.7s ease; }
.index:hover { background: url(menu/index-mouse.png); background-repeat: no-repeat; float: right; }

Thank you for your answers!