我有一个列表居中的菜单 . 将鼠标悬停在其中一个菜单项会导致在菜单下方打开div（就像在logitech.com上一样，除了不是全宽，它是980px） .

它在FF中效果很好，但在Opera中，因为div的左侧比菜单列表项的左侧更左侧，当您尝试将div悬停在div内部时，div会消失 .

即使菜单左对齐，我也无法设置绝对数字的原因是因为菜单项改变了语言，因此菜单列表项的宽度发生了变化 .

这是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>

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;}

我尝试了各种设置，解决它的唯一方法是设置一个精确的边距，但正如我所提到的，这只适用于一种语言，因为其他语言会再次抛弃它 .

任何帮助深表感谢 .

css html menu centering