2013-07-30 66 views
0

我正在使用Jquery Jmenu进行菜单显示。它在IE8中加载页面时显示为列表视图。 加载后,几秒钟后显示为正常水平视图。尽管它在Chrome浏览器上运行良好。 请帮忙。这是我们正在使用的CSS。它在加载菜单时以HTML格式显示数据。加载时间加载Jmenu呈现问题

.jMenu { 
    display: table; 
    margin: 0; 
    padding: 0 
} 

/* First level */ 
.jMenu li { 
    display: inline; 
    background-color: rgb(000,063,096); 
    margin: 0; 
} 

.jMenu li a { 
    padding: 10px; 
    display: inline; 
    background-color: transparent; 
    color: white; 
    text-transform: capitalize; 
    cursor: pointer; 
    font-size: 12px; 
} 

/* Lower levels */ 
.jMenu li ul { 
    display: none; 
    position: absolute; 
    z-index:9999; 
    padding: 0; 
    margin: 0; 
} 

.jMenu li ul li { 
    background-color: rgb(000, 063, 096); 
    display: block; 
    border-bottom: 1px solid #484548; 
    padding: 0; 
} 

.jMenu li ul li.arrow { 
    background-color: rgb(000, 063, 096); 
    background-image: url('../images/arrow_down.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 6px; 
    padding: 0; 
    border-bottom: none; 
    padding-bottom: 10px 
} 

.jMenu li ul li a { 
    font-size: 11px; 
    text-transform: none; 
    padding: 5px; 
    display: block; 
    border-top: 1px solid transparent; 
    border-bottom: 1px solid transparent; 
} 

.jMenu li ul li a.isParent { 
    background-color: #f2f2f2 ; 
    background-image: url('../images/arrow_right.png'); 
    background-repeat: no-repeat; 
    background-position: right center; 
    color: #000000; 

} 

.jMenu li ul li a:hover { 
    background-color: #c4e0f6; 
    border-top: 1px solid #c4e0f6; 
    border-bottom: 1px solid #c4e0f6; 
    color: #000000; 
} 

绑定使用HTML格式标记与文字

<table border="0" cellspacing="0" width="100%"> 
    <tr> 
     <td style="width: 100%" class="topMenuBar"> 
      <asp:Literal ID="Literal1" runat="server"></asp:Literal> 
     </td> 
    </tr> 
</table> 

jQuery函数时没有将jQuery CSS fileson菜单

<link rel="stylesheet" type="text/css" href='<%# ResolveUrl("~/jMenu-master/css/jMenu.jquery.css") %>'/> 
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jquery.min.js") %>'></script> 
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jquery-ui.js") %>'></script> 
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jMenu.jquery.js") %>'></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#jMenu").jMenu({ 
       ulWidth: '150', 
       effects: { 
        effectSpeedOpen: 300, 
        effectTypeClose: 'slide' 
       }, 
       animatedText: false 
      }); 
     }); 


    </script> 


![this is how html format coming while loading menus] 
+0

美国连锁行业代码 –

+0

上面提到的我的代码。请帮助 – Vandana

+0

也许这就是问题,也许给我们你的ie版本,并尝试检查你的CSS –

回答

0

尝试这一点 - 在我们的例子中,我们显示菜单在ul中,我们最初通过控件的style属性隐藏它。完成页面渲染和绑定jquery方法后,通过使用css或您的便利来显示它。

<ul class="menu-hvr" id="jMenu" style="display:none"> 
      @if (!showUserMenu) 
      { 
       <li class="buttonFirstAll homebtn1"> 
        <a href="/sign-up">sign up</a> 
       </li> 
       <li class="homebtn2"> 
        <a href="/sign-in/?popup=true">sign in</a> 
       </li> 
      }........ 
    </ul>