I'm unable to center a menu's "dropdown" div in Opera

Question

I have a menu where the list is centered. Hovering one of the menu items causes a div to open right under the menu (like on logitech.com except not fullwidth, it is 980px).

It works great in FF, but in Opera, since the left side of the div is way more left than the left side of the menu list item, when you try to hover inside the div to the left, the div disappears.

The reason I can't set absolute numbers even if the menu were aligned left is because the menu items change language, therefore the widths of menu list items changes.

Here's the html

        <div id="menu" class="round6">
        <ul>
            <li><a href="index.php">{home}</a></li>
            <li><a href="info.html">Info</a></li>
            <li id="hover">
                <div class="st_nav_menu">
                  <a href="javascript:void(0)">{products}</a>
                  <div id="category_list">
                    <div id="menuprod">{featured}</div>
                  </div>
                </div>
            </li>
            <li><a href="about.html">{aboutus}</a></li>
            <li>{cartcontents}</li>
            <li>{checkout}</li>
        </ul>
    </div>

The css

#menu {float:left; width:980px; height: 40px; padding: 0; background: transparent; margin:18px auto 0px auto; border:0px;}

#menu ul {padding: 0 0 0 0; list-style: none; line-height: normal; border:0px; text-align:center;}

#menu li {height: 40px; /*opacity:0.5; transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -webkit-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; filter: alpha(opacity = 50); /* For IE */ display:inline-block;}
#menu li:hover {opacity:1; }

#menu li a {float: left; height: 37px; padding: 0px 18px 0px 18px; text-decoration: none; font-family: 'Exo 2', sans-serif; font-size:16px; font-weight:600; color:#fff; /* border-top: 3px solid #e5e4e4; */ text-transform:uppercase; letter-spacing:1px; border-spacing: 10px; line-height: 36px; font-weight:400; border-top:0px; background:transparent; z-index:9999; transition: all 2s ease-out; -moz-transition: all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: all 2s ease-out; -o-transition: all 2s ease-out;}

#menu a:hover {color:#333333; background-color:#80c41c; z-index:9999; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0);}

#category_list {display:none; height:316px; width:980px; background:#80c41c; position:absolute; z-index:9999; text-align:center; padding:0px 0px; -webkit-box-shadow: 0px 7px 5px -4px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 7px 5px -4px rgba(50, 50, 50, 0.75); box-shadow: 0px 7px 5px -4px rgba(50, 50, 50, 0.75);}
#category_list a {color:#333333; background:none; line-height:normal; text-align:center;}
#category_list a:hover {color:#333333; background:none; line-height:normal;}

#hover {}
#hover:hover {background-color:#80c41c;}
#hover:hover a {color:#333333; text-align:center;}
#hover .st_nav_menu:hover #category_list {top:135px; left:0; right:0; margin-left:auto; margin-right:auto; text-align:center; z-index:9999; float:left; display:block;}
.st_nav_menu {}
#category_list .st_nav_menu:hover #category_list {display:block; text-align:center; z-index:9999}

#menuprod {width:800px; margin:0 auto; text-align:center;}

I have tried various settings and the only thing that solves it is setting an precise margin, but as I mentioned, that only works for one language, since the other languages throw it off again.

Any help is much appreciated.