用JQuery做tab标签切换效果，但是页面刚进来时，标签是错乱的，”学院新闻“在上边，”学院通知“在下边，不是靠在一起的，如图：


然后鼠标移动到“学院通知”的标签，又自己跑到上面去了，如图：

如果这时再点”学院新闻“，就又出现了上面的情况。
css代码：

1. .mode h3 {   z-index:2; font-size:12px; background:url(images_test/pic.gif) no-repeat; width:95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px; }
   
2.                 .mode h3.active { background-position:0 -25px; color:#fff;}
   
3.                 #news, #notice { position:relative; top:24px; left:0; width:500px; padding:10px;  border:1px solid #ace; z-index:1;}
   
4.                 #notice { display:none;}

复制代码

JQuery代码：

1. <script type="text/javascript">
   
2.     $(function () {
   
3.         $('.mode h3').mouseover(function () {
   
4.             $('.mode div').hide();
   
5.             $(this).siblings('h3').removeClass('active').end()
   
6.                                                           .addClass('active').next('div').show();
   
7.         });
   
8.     })
   
9. </script>

复制代码

HTML代码：

1. <div class="mode" style="margin-top:10px;margin-right:0px;float:left;width:550px;">
   
2.             <!-- 默认第一个tab为激活状态 -->
   
3.         <h3 class="active">学院新闻</h3>
   
4.         <div id="news" >
   
5.             <ul style="height:185px;line-height:145%">                          
   
6.              <%=DtCms.ActionLabel.Article.ViewTxtList(10, 60, 0, "", "ClassId=1 and IsRed=1 and IsLock=0", "AddTime desc",0)%>      
   
7.           </ul>        
   
8.         </div>
   
9.             <h3>学院通知</h3>
   
10.         <div id="notice" >
    
11.             <ul style="height:185px;line-height:145%">   
    
12.                  <%=DtCms.ActionLabel.Article.ViewTxtList(10, 42, 0, "", "ClassId=44 and IsRed=1 and IsLock=0", "AddTime desc",0)%>
    
13.              </ul>
    
14.         </div>
    
15.    </div>
    
16.    <div class="clear"></div>

复制代码

请问是哪里出问题了？  ？

突然又莫名其妙的正常了，结贴。