我有一个css问题（我相信是的，也许是JavaScript？），我正在努力适应我们的网站设计，以改进现有的静态菜单（在UL/LI元素上使用css制作，这是经常做的。）
原始代码来自：1stwebdesigner.com的一个名为/tutorials/create-stay-on-top-menu-css3-jquery/的"教程"页面
到目前为止，我只在一个测试页面上对其进行了调整以适应我们的网站。
我们的老式菜单可以在任何当前页面上看到，新版本保持在顶部，用于测试的nag菜单页面在这里：
http://www.detroitblackjackteam.com/team-play.htm
有一个相同的页面使用旧菜单：
http://www.detroitblackjackteam.com/teamplay.htm
（注意类似的URL：只需去掉文件名中的连字符，teamplay.htm）
到目前为止，一切都很好，只是我注意到新版本的菜单没有在浏览器放大或小屏幕的情况下正确居中（首先注意到在我的iPhone上检查网站的问题，但如果你把浏览器窗口设置得很小并放大菜单，它也会出现…请参阅此处的屏幕捕获示例：
http://www.detroitblackjackteam.com/files/ZoomProblem.jpg
我已经研究过了，尽我所能，在浏览器中用FireBug戳来戳去，但我一辈子都看不到如何使两个菜单保持在同一位置。
这可能很简单，但我只是错过了它：-（
感谢任何帮助/想法。此外，任何清理代码的想法都将受到赞赏，因为我知道我是从不同的来源拼凑而成的，在目前的状态下，这可能不是世界上最有效的东西…；-）
CSS、HTML和JavaScript的代码块复制如下以供参考：
CSS
.bevelmenu { font: bold 13px Arial; text-align: center;
padding: 9px 0 5px; margin: 0; width: 100%; }
.bevelmenu li { list-style: none; display: inline; }
.bevelmenu li a { padding: 9px 7px; text-decoration: none; color: #aaaaaa; }
.bevelmenu li a:hover { color: #93D48C;
background-image: url("menubg.gif");
background-repeat: no-repeat; background-position: center center; }
/* CSS for stay-on-top menu */
#menu {
white-space:nowrap;
height: 30px;
text-align: center;
background-image:url("menu-bar.png");
background-repeat:repeat;
background-attachment:scroll; }
#navi {
white-space:nowrap;
height: 30px;
text-align: center; }
.default {
width: 100%; }
.fixed {
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 4;
box-shadow: 0 0 36px #afffff;
-webkit-box-shadow: 0 0 36px #afffff;
-moz-box-shadow: 0 0 36px #afffff; }
HTML
<div id="navi">
<div id="menu" class="default">
<ul class="bevelmenu">
<li><a href="http://www.detroitblackjackteam.com/">Home</a></li>
<li><a href="http://www.detroitblackjackteam.com/bbs/">Forum</a></li>
<li><a href="http://www.detroitblackjackteam.com/webmail.htm">Mail</a></li>
<li><a href="http://www.detroitblackjackteam.com/cal.htm">Calendar</a></li>
<li><a href="http://www.detroitblackjackteam.com/ratings/">Ratings</a></li>
<li><a href="http://www.detroitblackjackteam.com/files/">Downloads</a></li>
<li><a href="http://www.detroitblackjackteam.com/blog/">Blog</a></li>
<li><a href="http://www.detroitblackjackteam.com/play/">Play!</a></li>
</ul>
</div><!-- close menu -->
</div><!-- close navi -->
JavaScript
<script type="text/javascript">
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
</script>
提前感谢任何&关于此的所有帮助/建议：-）
-DBJT
=-=-=-\=-=-=-=-\=-=-=-
编辑、更新
我收到了这段代码的原始开发人员的评论，他还没有时间为我真正研究它，但仍然回复了一封电子邮件询问。他说：
<!-- language: lang-none --> <!-- Copy From E-Mail Message -->
>>> That would suggest there's a problem with the offset
>>> (menu is longer than the viewport when zoomed in, and the
>>> script is not able to make a negative offset, to the menu
>>> starts at 0 position in the viewport). Either that or it's
>>> jQuery's fault. Well, not exactly fault, it's just that
>>> there can be some compatibility issues; the script was
>>> written over 3 years ago and uses an old version of jQuery
>>> (newest at the time of writing), but browsers evolved
>>> since then a lot. Some methods jQuery makes use of may
>>> not be working correctly anymore...
所以也许它比我想象的更复杂，JQuery中的一些东西。。。或某物
我的问题还没有答复吗？
真的很感激任何人对此的想法或想法，任何如何缩小范围的想法，问题可能在哪里。。。甚至只是猜测。
=-=-=-\=-=-=-=-\=-=-=-
**编辑，再次更新；）**
忘了提一下这也是在使用JQuery。。。我想有点重要，哈哈
我在这个问题上添加了一个"jquery"标签，并注意到它达到了1.4.2版本：
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
charset="utf-8">
</script>
再次感谢所有能弄清楚这里发生了什么的人：）
-DBJT
设置CSS
.fixed｛最小宽度：542px；｝
以使其在两种情况下相似。